如何programaticaly添加道具JSX组件

Question

考虑：

let component = []; 
switch(foo) { 
    case 'bar': 
    component = <TheBarComponent/> 
    break; 
    case 'baz': 
    component = <TheBazComponent/> 
    break; 
    case ... 
} 
// set component properties here. 

鉴于在switch所有组件都具有相同的道具签名，我该如何设置他们在一个地方，而不是在衬里他们都在每case声明？

Answer 1

当您使用名称以大写字母开头的<ComponentNameHere>语法时，它是React.createElement(ComponentNameHere);的缩写，它创建了一个组件实例。实例应该被视为不可变的，所以你不想在之后修改它。

有关完整详细信息，请参阅JSX In Depth页面。

相反，请记住，“变量名”中JSX仅仅是一个普通的JavaScript标识符，这样你就可以动态设置，就像这样：

let Component; 
switch(foo) { 
    case 'bar': 
     Component = TheBarComponent 
     break; 
    case 'baz': 
     Component = TheBazComponent 
     break; 
    case ... 
} 

let myComponent = <Component prop="value" /> 

Answer 2

你可以尝试用React.createFactory做到这一点，

var Main = React.createClass({ 
    render: function() { 
    let component; 
    let action = 'bar'; 

    switch(action) { 
     case 'bar': 
     component = React.createFactory(TheBarComponent) 
     break; 
     case 'baz': 
     component = React.createFactory(TheBarComponent) 
     break; 
    } 

    component = component({ name: 'test' }) 

    return <div> 
     { component } 
    </div>; 
    } 
}); 

Example