Question

我目前正在使用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>}
)

是否有一种有效的方法可以根据变量/标志选择从多个组件中渲染出一个？

您是否建议使用另一种方法来显示不同的模态？

Answer 1

我会为此

使用哈希表

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

你使用它的方式是

const Component = Modals[name]; 并在渲染中返回<Component />

我强烈要求您重命名组件，Modal-1是一个糟糕的命名惯例，对任何人都没有多大意义。 LoginModal ImageModal这样的事情对开发人员来说意味着更多。

显示多个组件中的一个最佳实践

1 个答案: