React：通过将列表作为道具传递来呈现组件列表

Question

我目前正在学习有关 React 的教程，并且对如何做到这一点很感兴趣：

class Counters extends Component {
  state = {
    counters: [
      { id: 0, value: 0 },
      { id: 1, value: 4 },
      { id: 2, value: 5 },
      { id: 3, value: 9 },
    ],
  };

  handleDelete = (counterID) => {
      console.log("Event handler called", counterID);
      const counters = this.state.counters.filter((c) => c.id !== counterID);
      this.setState({ counters });
  };

render() {
    return (
      <React.Fragment>
        {this.state.counters.map((counters) => (
          <Counter
            key={counters.id}
            counters={counters}
            onDelete={this.handleDelete}
          ></Counter>
        ))}
      </React.Fragment>
    );
  }

我正在使用“计数器”来跟踪我的个人“计数器”（注意单数名词）组件。我很想知道为什么我可以简单地 将整个数组作为 prop 传递到“计数器”中，并使用以下行：

counters={counters}

并在“计数器”中使用以下代码class：

class Counter extends Component {
  state = {
    value: this.props.counters.value,
    tags: ["tag1", "tag2", "tag3"],
  };

  styles = {
    fontSize: "50px",
    fontWeight: "bolder",
  };
  
  handleIncrement() {
    console.log("Increment clicked.");
    this.setState({ value: this.state.count + 1 });
  }

  render() {
    console.log(this.props);
    return (
      <React.Fragment>
        <h4>Counter #{this.props.counters.id}</h4>
        <span style={{ fontSize: "25px" }} className={this.getBadgeClasses()}>
          {this.formatCount()}
        </span>
        <button
          onClick={() => this.handleIncrement()}
          className="btn btn-secondary btn-sm m-2"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.counters.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
        {this.renderTags()}
      </React.Fragment>
    );
  }

  getTags() {
    let tags = this.state.tags;
    return tags === undefined || tags.length <= 0 ? (
      <p>"The tag list is empty."</p>
    ) : (
      tags.map((tag) => <li key={tag}>{tag}</li>)
    );
  }

  renderTags() {
    return <ul>{this.getTags()}</ul>;
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.value === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const value = this.state.value;
    return value === 0 ? "Zero" : value;
  }
}

export default Counter;

我能够获得完整的“计数器”组件列表吗？我的印象是 我只在“计数器”class 中声明了一个，但是通过传递一个列表我能够呈现整个计数器列表。这怎么可能？我在这里缺少什么概念？

Answer 1

如果你想通过计数器组件的整个列表：

counters={this.state.counters}

因为在 counter={counters} 中，您实际上传递了一个元素（方法映射逐项发送）。所以实际上，当你写this.state.counters.map((counters) => ...时，你应该写this.state.counters.map((counter) =>...因为它只是数组counters的一个元素。

React：通过将列表作为道具传递来呈现组件列表

React: Rendering a list of components by passing the list as a prop

jsx

reactjs