如何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