React / JSX Dynamic Component Name

javascript reactjs react-jsx

2022-08-30 00:22:54

我正在尝试根据组件的类型动态呈现组件。

例如：

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

我尝试了这里提出的解决方案 React/JSX 动态组件名称

这在编译时给了我一个错误（使用 browserify for gulp）。它期望XML在我使用数组语法的地方。

我可以通过为每个组件创建一个方法来解决这个问题：

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但这意味着我创建的每个组件都有一个新的方法。这个问题必须有一个更优雅的解决方案。

我对建议持非常开放的态度。

答案 1

<MyComponent />编译为，这需要字符串（HTML 标记）或函数（ReactClass）作为第一个参数。React.createElement(MyComponent, {})

您可以将组件类存储在名称以大写字母开头的变量中。请参阅 HTML 标记与 React 组件。

var MyComponent = Components[type + "Component"];
return <MyComponent />;

编译为

var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

答案 2

这里有一个关于如何处理这种情况的官方文档：https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime

基本上它说：

错：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Wrong! JSX type can't be an expression.
    return <components[props.storyType] story={props.story} />;
}

正确：

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // Correct! JSX type can be a capitalized variable.
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}