React - 通过函数参数动态返回组件答案

【问题标题】：React - Return components dynamically through function argumentsReact - 通过函数参数动态返回组件
【发布时间】：2018-02-05 02:05:13
【问题描述】：

我有 SPA，我在其中呈现不同的部分（组件）。我希望能够切换 2 个不同的组件并根据 cookie 渲染一个。我正在考虑创建一个函数来接受我想要切换的 2 个组件的名称。

对此的一般方法

renderSection(componentA, componentB, cookie) {
        const ComponentA = upperFirst(componentA);
        const ComponentB = upperFirst(componentB);

        return cookie ? <ComponentA /> : <ComponentB />;
}

我会调用函数：renderSection('BottomSection', 'FlexSection', 'cookie')

但是，我收到以下警告： Warning: <BottomSection /> is using uppercase HTML. Always use lowercase HTML tags in React.

我见过一些示例，您可以将组件分配给对象中的键，然后根据您提供的输入返回组件。但是因为我可以有很多部分要渲染，我认为这个对象会变得难以维护，因为我必须在更新组件时添加/删除键。

components = {
        foo: FooComponent,
        bar: BarComponent
    };
return components["foo"]

既然我已经需要每个组件，有没有办法返回一个组件而不必创建一个对象并定义每个组件？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您不需要将组件名称作为字符串传递，您可以将组件本身传递给函数，因为它只是一个 javascript 对象

您可以执行以下操作

renderSection(ComponentA, ComponentB, cookie) {
     return cookie ? <ComponentA /> : <ComponentB />;
}

然后

renderSection(BottomSection, FlexSection, 'cookie')

注意renderSection 函数如何接受首字母大写的组件参数名称。

【讨论】：