时间戳

首页 > 解决方案 > 在 React 中返回 array.map() 的最佳方式？

javascript - 在 React 中返回 array.map() 的最佳方式？

问题描述

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

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

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

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

感谢您抽出宝贵的时间！

标签： javascriptreactjs

解决方案

由于 react 是基于组件的，因此您应该将 props 分组到它所属的组件中。选项 2 没有多大意义，因为您有一个 ItemList 组件，它接受项目列表并显然呈现和维护该列表。Item 组件特定于一个项目，不应该知道其他项目。此外，使用选项 1，您可以将项目列表与实际项目分离。

更好的方法是让父组件呈现一组子项。

推荐阅读