Question

我需要通过反应来添加组件：

<componentName ..... />

但是，组件的名称是未知的并且来自变量。我怎么渲染呢？

Answer 1

您需要存储对动态组件的引用：

plt.colorbar()

有关详细信息，请参阅react docs。

Answer 2

您可以创建导出所有不同组件的文件

// Components.js
export Foo from './Foo'
export Bar from './Bar'

然后全部导入

import * as Components from './Components'

然后你可以根据变量/ prop来动态创建它们：

render() {
  // this.props.type = 'Foo'
  // renders a Foo component
  const Component = Components[this.props.type];
  return Component && <Component />;
}

Answer 3

Okay, for me this worked:

import {Hello} from 'ui-hello-world';

let components = {};

components['Hello'] = Hello;
export default components;

然后在我班上：从＆＃39; ..... json＆＃39;中导入customComps; .... 让Component = Custom.default [customComps.componentName];

      return (
        <Component

动态添加反应中的组件

3 个答案: