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

IT技术 javascript reactjs react-jsx jsx
2021-05-20 03:48:00

我有一个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循环中），它可以工作。但是，如果我尝试使用变量中的名称，则不会。

我尝试按照文档中的指导将名称分配给大写的变量，但仍然没有。

我的画布组件确实有子组件，但它不是react组件，如这个 react devtools screengrab 所示：

在此处输入图片说明：

该组件根本不在画布上呈现。

请帮忙。谢谢

2个回答

无论您使用什么作为 JSX“标签”都必须解析为一个函数（代表 HTML 标签的小写名称是例外）。如果kid.type解析为字符串，则它不起作用。

您必须先构建name => component地图：

const components = {
  CanvasTextbox,
};

// ...

let CanvasComp = components[kid.type];

您不能使用通用表达式作为 React 元素类型。如果您确实想使用通用表达式来指示元素的类型，只需先将其分配给大写的变量即可。当您想基于 prop 渲染不同的组件时，通常会出现这种情况：

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

有关更多详细信息，请参阅React 文档。

其它你可能感兴趣的问题
上一篇react。试图从 onClick 事件调用自定义钩子 下一篇react传递props给孩子