顯示多個組件中的一個最佳實踐

我正在使用React和Redux，並試圖找到顯示多個組件之一的最佳方法。也就是說，我設置了各種模式（<Modal-1 />,<Modal-2 />，...，<Modal-N />），我的Redux存儲中的變量描述了哪種模式應該顯示。顯示多個組件中的一個最佳實踐

// store 
modal: { 
    name: 'Modal-8', // null or undefined --> no show 
    payload: 'some data the modal might need' 
}

的初步方法問題將像

export default Modals ({ name }) => (
    {name === 'Modal-1' && <Modal-1>} 
    {name === 'Modal-2' && <Modal-2>} 
    {/*...*/} 
    {name === 'Modal-N' && <Modal-N>} 
)

有選擇來呈現出一個基於變量/標誌許多組件的有效途徑？

您是否建議一種顯示不同模態的替代方法？

來源

2016-11-17 aryzing

我會用一個哈希表這個

export const Modals = { 
    'Modal-1': Modal1, 
    'Modal-2': Modal2, 
    'Modal-3': Modal3 
}

的方式，你會使用這是

const Component = Modals[name]; 和渲染回報<Component />

我會強烈重新命名你的組件，Modal-1是一個糟糕的命名約定，對任何人都沒有多大意義。 LoginModalImageModal這樣的事情對開發者來說意味着更多。

來源

2016-11-17 08:29:56

是的，我的組件具有描述性的名稱，它僅用於示例:) – aryzing

@aryzing真棒！很高興聽到那個笑聲。我就像這是一個奇怪的命名約定哈哈 –

顯示多個組件中的一個最佳實踐

回答

相關問題