从 JSON 对象反应动态组件答案

【问题标题】：React dynamic components from JSON object从 JSON 对象反应动态组件
【发布时间】：2020-09-22 07:04:17
【问题描述】：

我正在寻找一个较短的版本来遍历来自 JSON 对象的组件 [“组件1”，“组件2”，“组件3”] 索引应该是步数，并且组件应该是动态输出的。现在我有一个静态的方式，它会随着更多的元素变得非常不舒服：

        <div">
            {step === 1 && <Component1 />}
            {step === 2 && <Component2 />}
            {step === 3 && <Component3 />}
        </div>

有谁知道这个问题的解决方案吗？

最好的问候！

【问题讨论】：

JSON 对象是什么样的？属性像{ components: [Component1, Component2, Component3] }吗？

标签： javascript reactjs

【解决方案1】：

您可以使用数组或对象将键映射到其值（索引在这里是键）：

const components = [<Component1/>,<Component2/>,<Component3/>]
<div>{components[step]}</div>

在数组中调用的上述组件（意思是，虽然只使用了一个组件，但所有元素都称为React.createElement），为了类似于条件渲染保存一个函数组件：

const functionComponents = [() => <Component1/>, () => <Component2/>,() => <Component3/>]
const Component = functionComponents[step];
<div><Component/></div>

【讨论】：