我正在尝试根据组件的类型动态呈现组件。
例如：
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"]();
}
但这意味着我创建的每个组件都有一个新方法。必须有一个更优雅的解决方案来解决这个问题。
我很乐意接受建议。
<MyComponent />编译为React.createElement(MyComponent, {})，它需要一个字符串（HTML 标记）或一个函数（ReactClass）作为第一个参数。
您可以将组件类存储在名称以大写字母开头的变量中。请参阅HTML 标签与 React 组件。
var MyComponent = Components[type + "Component"];
return <MyComponent />;
编译为
var MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});
这里有一份关于如何处理这种情况的官方文档：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} />;
}
应该有一个容器将组件名称映射到所有应该动态使用的组件。组件类应该在容器中注册，因为在module化环境中，否则没有可以访问它们的单一位置。组件类不能在没有明确指定的情况下通过它们的名称来识别，因为功能name在生产中被缩小了。
它可以是普通对象：
class Foo extends React.Component { ... }
...
const componentsMap = { Foo, Bar };
...
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
或者Map例如：
const componentsMap = new Map([[Foo, Foo], [Bar, Bar]]);
...
const DynamicComponent = componentsMap.get(componentName);
普通对象更合适，因为它受益于属性简写。
一筒module与命名出口可以充当这样的地图：
// Foo.js
export class Foo extends React.Component { ... }
// dynamic-components.js
export * from './Foo';
export * from './Bar';
// some module that uses dynamic component
import * as componentsMap from './dynamic-components';
const componentName = 'Fo' + 'o';
const DynamicComponent = componentsMap[componentName];
<DynamicComponent/>;
这适用于每个module代码样式的一个类。
装饰器可以与类组件一起使用以获得语法糖，这仍然需要明确指定类名并将它们注册到映射中：
const componentsMap = {};
function dynamic(Component) {
if (!Component.displayName)
throw new Error('no name');
componentsMap[Component.displayName] = Component;
return Component;
}
...
@dynamic
class Foo extends React.Component {
static displayName = 'Foo'
...
}
装饰器可以用作具有功能组件的高阶组件：
const Bar = props => ...;
Bar.displayName = 'Bar';
export default dynamic(Bar);
使用非标准displayName而不是随机属性也有利于调试。
我想出了一个新的解决方案。请注意，我使用的是 ES6 module，因此我需要该类。你也可以定义一个新的 React 类。
var components = {
example: React.createFactory( require('./ExampleComponent') )
};
var type = "example";
newComponent() {
return components[type]({ attribute: "value" });
}
如果您的组件是全局的，您可以简单地执行以下操作：
var nameOfComponent = "SomeComponent";
React.createElement(window[nameOfComponent], {});