使用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並遵循容器組件模式，那么基於數組中的元素（在我的Redux狀態內），在包裝器組件內呈現這些<Functional/>組件的動態數量的最佳方法是什么？ ？

例如，我的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()是訪問器函數，是從狀態訪問功能項的規范方法。

這樣，您可以處理狀態結構或其他渲染布局中的更改。 （因此，我認為更健壯）。 它看起來更像遵循單一責任原則。

Answer 2

解決方案說明

• 創建一個包裝函數表示組件，該組件使用一定數量和功能來獲取<Functional/>道具值。
• 創建一個容器組件，該容器組件連接到此新包裝器組件，並傳入數量（基於Redux狀態）和訪問器函數以獲取<Functional/>道具值。

范例程式碼

Wrapper.jsx：

const Wrapper = (props) => {

  const elements = [];

  for (let i = 0; i < props.quantity; i++) {
    elements.push(
      <Functional prop1={ getPropValue1(i) } prop2={ getPropValue2(i) } ...
                  key={ ... }/>
    );
  }

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

Wrapper.propTypes = {
  quantity: React.PropTypes.number.isRequired,
  getPropValue1: React.PropTypes.func.isRequired,
  getPropValue2: React.PropTypes.func.isRequired,
  // ...
};

ContainerComponent.js：

const mapStateToProps = (state) => ({
  quantity: state.functionalItems.length,
  getPropValue1: (index) => state.functionalItems[index].prop1,
  getPropValue2: (index) => state.functionalItems[index].prop2,
  // ...
});

const ContainerComponent = connect(mapStateToProps)(Wrapper);