動態柱創作的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