javascript - 在 JSX 中运行时选择 React 组件的类型

Question

我有一个 react 应用程序，我想在运行时选择组件的类型。我正在使用 ES6 和 JSX。

这是我的代码:

import Canvas from '../components/Canvas'
import CanvasTextbox from '../components/CanvasTextbox';


....

export default class CenterPane extends React.Component {

...

render() {
        const canvasKids = [];

        //for (var i = 0; i < 1; i++) {
        //   canvasKids.push(<CanvasTextbox key={i} id={'CanvasTextbox1'} />);
        //};

         for (var i = 0; i < 1; i++) {
             let kid = this.state.kids[i];
             let CanvasComp = kid.type; // evaluates to 'CanvasTextbox '
             canvasKids.push(<CanvasComp key={i} id={kid.id} />);
             console.log(canvasKids)
         };



        return (
            <div>
                Canvas:
                <Canvas
                    name="myCanvas"
                    addChild={this.onAddChild.bind(this)}
                >

                    {canvasKids}


                </Canvas>
           </div>

        );
    }

}

当我按名称引用组件时(如注释的 for 循环中所示)，它可以工作。但是，如果我尝试使用变量中的名称，则不会。

我尝试按照docs中的指导将名称分配给大写变量。 ，但仍然一无所获。

我的 Canvas 组件确实有子组件，但它不是 react 组件，如以下 react 开发工具屏幕截图所示:

:

该组件根本没有渲染在 Canvas 上。

请帮忙。谢谢

Answer 1

无论您使用什么作为 JSX“标记”，都必须解析为函数(表示 HTML 标记的小写名称除外)。如果 kid.type 解析为字符串，则它不起作用。

您必须首先构建一个 name => 组件 映射:

const components = {
  CanvasTextbox,
};

// ...

let CanvasComp = components[kid.type];