动态柱创作的js反应

Question

我在我的代码如下数据：

this.state.data = [ 
        {"col0":"Service Port","col1":80,"col2":8080} 
        {"col0":"Service Name","col1":"--","col2":"--"}    
        ] 

render功能：

............ 
............ 
<div className="row"> 
        <div className="col-lg-12"> 
         <CollapsiblePanel name="Services" 
              bsStyle="info" 
              open> 
          <BootstrapTable data={this.state.data} 
              striped 
              hover> 
           {/*{ 
            for(var i = 0; i < this.state.data.length; i++) { 
             var col = 0; 
             for(var j = 0; j < this.state.data[i].length; j) 
             <TableHeaderColumn 
              className="tableHeader" 
              dataField={this.state.col++} 
            } 
           }*/} 
           <TableHeaderColumn 
            className="tableHeader" 
            dataField="col0" 
            isKey 
            width="40%"></TableHeaderColumn> 
           <TableHeaderColumn 
            className="tableHeader" 
            dataField="col1" 
            width="40%"></TableHeaderColumn> 
           <TableHeaderColumn 
            className="tableHeader" 
            dataField="col2" 
            width="40%"></TableHeaderColumn> 
          </BootstrapTable> 
         </CollapsiblePanel> 
        </div> 
       </div> 

我想要做的是动态创建TableHeaderColumn是因为在我的data阵列中可能会有或多或少的col键，例如col3,col4等。我尝试将for-loop集成到内部渲染，但它没有做的工作（即时通讯不知道如何做到这一点）。

任何人都可以建议如何做到这一点动态？谢谢！

Answer 1

使用Array.prototype.map

<BootstrapTable data={this.state.data} 
    striped 
    hover> 
    { 
    this.state.data.map((item) => { 
     return (
     <TableHeaderColumn 
      className="tableHeader" 
      dataField={item.col0} 
      isKey 
      width="40%" /> 
    ); 
    } 
    } 
</BootstrapTable> 

Answer 2

首先，你必须存储您的动态列的地方，我会认为这列从父组件来了，所以我将它们设置为默认的道具。

class MyOwnComponent extends from React.Component{ 
     static defaultProps = { 
      cols = [ 
       { 
        className: "tableHeader", 
        dataField: "col0", 
        width: "40%" 
       }, 
       { 
        className: "tableHeader", 
        dataField: "col1", 
        width: "40%" 
       }, 
       { 
        className: "tableHeader", 
        dataField: "col2", 
        width: "40%" 
       }  
      ]   
     } 

     render(){ 
      return(
        <div className="row"> 
         <div className="col-lg-12"> 
          <CollapsiblePanel name="Services" 
              bsStyle="info" 
              open> 
           <BootstrapTable data={this.state.data} 
               striped 
               hover> 
            {/*{ 
             for(var i = 0; i < this.state.data.length; i++) { 
              var col = 0; 
              for(var j = 0; j < this.state.data[i].length; j) 
              <TableHeaderColumn 
               className="tableHeader" 
               dataField={this.state.col++} 
             } 
            }*/} 
            { 
             this.props.cols.map(function(item){ 
             return (
              <TableHeaderColumn className={item.className} dataField={item.dataField} width={item.width}/> 
             )} 
            )}         
           </BootstrapTable> 
          </CollapsiblePanel> 
         </div> 
        </div> 
      ) 
     } 
    } 

关于这个关键，React鼓励您为组件的每个实例拥有一个唯一的ID，这就是说话的种类。如果你没有它，你可以在使用map函数迭代时用索引解决它。就像这样：

this.props.cols.map(function(item, index){ 
    return (
     <TableHeaderColumn key={index} className={item.className} dataField={item.dataField} width={item.width}/> 
    )} 

请更多的参考检查文档：

• React Lits & Keys