Question

我是React的新手，正在关注一些视频教程，也正在阅读一些有关它的书。（没有早于2016年-因为变化很大）

在旅途中，我通过两种方法在React中进行array.map（）循环。

1。在父组件内部执行map循环，然后从子组件中返回元素

class ItemsList extends React.Component {
  render() {
    const items = this.props.items.map((item) =>(
      <Item
        id={item.id}
        title={item.title}
      />
  ));
    return (
      <div id='items'>
        {item}
      </div>
    );
  } //render
}

class Item extends React.Component {
  render() {
    return (
      <li key={this.props.id}>
          {this.props.title}
      </li>
    );
  } //render
}

2。在子组件内部执行map循环，然后将整体返回给父组件

class ItemsList extends React.Component {
  render() {      
      ));
        return (
          <div id='items'>
            <Item
            id={item.id}
            title={item.title}
            />
          </div>
        );
      } //render
}

class Item extends React.Component {
  render() {
    const item = this.props.items.map((item) =>(
      <li key={item.id}>
          {item}
      </li>
    ));
    return(item);
  }
}

如果我理解正确，React的优点之一就是它是一种对应用程序更“友好的团队”工作方式，因为每个人都可以一次在一个组件上工作而不会真正干扰其他人的工作。 / p>

但是基于此，我会选择选项2，因为我们尽可能少地触摸父组件，而将更多注意力放在子组件上。

但是我也相信选择选项1会更明智，因为我们将所有数据和绑定都包含在父组件中，这使得它更加结构化，并且对子组件的绑定更少。

很抱歉，如果我仍然缺少一些词汇来为经验丰富的React开发人员更好地解释这一点-但我希望我对此有所澄清。

感谢您抽出宝贵的时间！

Answer 1

由于react是基于组件的，因此您应该将props归入它所属的组件。选项2没有多大意义，因为您有一个ItemList组件，该组件接受项的 list 并明显地呈现和维护该列表。 Item组件特定于一个项目，并且不应该知道其他项目。此外，通过选项1，您可以将商品列表与实际商品脱钩。

更好的方法是有一个父组件来呈现子项的集合。

Answer 2

我认为Item组件应尽可能独立于ItemList组件。我建议采用以下结构：

ItemList组件：

const ItemList = ({ items }) => (
    <div>
        {items.map(item => (
            <Item key={item.id} item={item} />
        ))}
    </div>
);

项目组件：

const Item = ({ item }) => (
    <p>The ID of the item is {item.id}</p>
);

这似乎与您的第一种方法类似，除了key应该属于ItemList组件，而且我会避免使用<li>标签使其可重用，但这实际上取决于您的用例

第二种方法在逻辑上是错误的，我同意@ ztadic91提到的内容，即Item组件不应了解其他组件。

在React中返回array.map（）的最佳方法？

2 个答案: