在React中返回array.map()的最佳方法?

我有点新的反应,并遵循一些视频教程,我也在阅读一些关于它的书籍。(不超过2016年——因为变化很大)

在我的旅程中,我通过了两种方法来执行React中的array.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。在子组件内部执行映射循环并将整个组件返回到父组件

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的优点之一就是它是一种更“团队友好”的方式来处理应用程序,因为每个人都可以一次处理一个组件,而不会真正干扰其他人的工作。

但基于此,我会选择选项2,因为我们尽量少接触父组件,而更多地关注子组件。

但我也相信选择选项1更明智,因为我们在父组件中拥有所有的数据和绑定,这使得它更结构化,子组件所需的绑定更少。

很抱歉,如果我仍然缺少一些词汇表来更好地为有经验的React开发人员解释这一点,但我希望我已经明确了这一点。

谢谢你花时间!