ReactJS中的組件陣列

Question

我使用ReactJS進行導航，無需插件。我想創建一個主要組件的數組。這個有可能？

的CoffeeScript：

Root = React.createClass 
    render: -> 
     self = this 
     <header> 
      <nav> 
       <ul> 
        {this.props.components.map((comp, i) -> 
         <li onClick={self.change.bind(self, i)}>{comp.name}</li> 
        )} 
       </ul> 
      </nav> 
      {this.props.components[this.state.active].component} 
     </header> 

    change: (i) -> 
     this.setState({active: i}) 

    getInitialState: -> 
     active: 0 

RootComponents = [ 
    {name: "main", component: React.createClass 
     render: -> 
      <div>its main</div> 
    }, 
    {name: "conf", component: React.createClass 
     render: -> 
      <div>its conf</div>} 
] 


React.render(
    <Root components=RootComponents />, 
    document.getElementById("main") 
); 

此代碼返回的項目（主要和CONF）而不是組件。

議定 編輯： {this.props.components [this.state.active] .component} 到： {React.createElement（this.props.components [this.state.active] .component ，NULL）}

Answer 1

我們通常使用需要獲得到位的組件，然後你可以將它們添加到一個數組，遍歷：

var componentA = require('./componentA'); 
var componentB = require('./componentB'); 

var navigationComponents = [componentA, componentB]; 

render() { 
    return(
     <div> 
      _.map(navigationComponents, Component) { 
       return <Component />; 
      } 
     </div> 
    ) 
} 

這是一個非咖啡例子..但你得到的點。