什麼是使用Redux容器組件模式呈現動態數量的React子組件的可靠方法？

Question

說我有一個功能陣營演示組件，就像這樣：

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, 
    // ... 
}; 

如果我使用終極版和容器組件模式下，這將是呈現內這些<Functional/>部件的動態數量的最佳方式一個包裝組件，基於數組內的元素（這是在我的Redux狀態中）？

E.g.我的終極版狀態可能是這樣的：

{ 
    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()是一個訪問功能訪問是從狀態的功能選項的規範手段。

這樣，您可以處理狀態結構或不同渲染布局的更改。 （ergo更強大（我認爲））。它看起來更像是遵循單一責任原則。

Answer 2

方案描述

• 創建包裝功能呈現組件，取入的量和功能來獲取<Functional/>丙值。
• 創建一個連接到這個新包裝器組件的容器組件，並傳入數量（基於Redux狀態）和訪問器函數以獲取<Functional/> prop值。

示例代碼

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);