反应 / JSX 动态组件名称

Question

我试图根据组件的类型动态地渲染它们。

例如：

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

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

这在编译时给了我一个错误（使用browserify代替gulp）。它需要XML，而我使用的是数组语法。

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

newExampleComponent() {
    return <ExampleComponent />;
}

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

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

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

Answer 1

应该有一个容器将组件名映射到所有应该动态使用的组件。组件类应该在一个容器中注册，因为在模块化环境中，没有单独的地方可以访问它们。由于函数< code>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);

普通对象更合适，因为它受益于属性速记。

具有命名导出的桶模块可以充当这样的映射：

// 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/>;

对于每个模块一个类的代码风格来说，这很好。

装饰器可以与语法糖的类组件一起使用，这仍然需要显式指定类名并将它们注册到映射中：

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);

使用非标准的< code>displayName代替random属性也有利于调试。

Answer 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} />;
}

Answer 3

<代码>

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

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

编译为

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