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

Question

我有一个反应应用程序，我想在运行时选择组件类型。我正在使用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的指导，但仍然没有。

我的画布组件确实有孩子，但它不是一个反应成分，如在此反应devtools screengrab：

：

组件不是在画布上绘制的。

请帮忙。谢谢

Answer 1

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

你必须先建立一个name => component地图：

const components = { 
    CanvasTextbox, 
}; 

// ... 

let CanvasComp = components[kid.type]; 

Answer 2

不能使用一般表现为阵营元素类型。如果您确实想使用通用表达式来指示元素的类型，请首先将其分配给大写变量。

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 Documentation当你想基于一个道具来呈现不同的组件这往往出现更多细节。