javascript - 使用 Redux 容器组件模式渲染动态数量的 React 子组件的稳健方法是什么？

Question

假设我有一个功能性的 React 演示组件，如下所示:

const Functional = (props) => {
  // do some stuff

  return (
    <div>
      // more HTML based on the props
    </div>
  );
}

Functional.propTypes = {
  prop1: React.PropTypes.string.isRequired,
  prop2: React.PropTypes.string.isRequired,
  // ...
};

如果我使用 Redux 并遵循容器组件模式，渲染这些动态数量的最佳方式是什么 <Functional/>包装器组件内的组件，基于数组内的元素(位于我的 Redux 状态内)？

例如我的 Redux 状态可能如下所示:

{
  functionalItems: [
    {
      prop1: 'x1',
      prop2: 'y1',
      // ...
    },
    {
      prop1: 'x2',
      prop2: 'y2'
    },
    // ... more items
  ],
  // ...
}

所以 functionalItems 中的每一项数组应对应于 <Functional/>组件，它们都被渲染为彼此相邻。

这是我第二次遇到这个问题，所以我希望这个问题足够常见，以便有好的解决方案。

我将发布我能想到的解决方案(但具有不良特征)，作为这个问题的答案。

Answer 1

我建议您将整个数组传递给包装器组件，如下所示:

const mapStateToProps = (state) => ({
    items: getFunctionalItems(state),
    // ...
});

然后在你的Wrapper.jsx中，这样做:

const Wrapper = (props) => {

  const elements = props.items.map((item, index) => {
    <Functional prop1={ item.prop1 } prop2={ item.prop2 } ...
      key={ ... /* you can use index here */ }/>
  });

  return (
    <div>
      { elements }
    </div>
  );

};

...其中 getFunctionalItems() 是一个访问器函数，它是从状态访问功能项的规范方法。

这样，您就可以处理状态结构的更改或不同的渲染布局。 (因此更强大(我认为))。它看起来更像是遵循单一职责原则。