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

Question

我有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"]

由于我已经要求每个组件，有没有办法返回组件而不必创建对象并定义每个组件？

Answer 1

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

您可以执行以下操作

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

然后

renderSection(BottomSection, FlexSection, 'cookie')

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