ReactJS輸出HTML代碼迴路道具

Question

我：

render() { 
     return (
      <table className="table table-condensed table-hover"> 
       <thead> 
       <col width="30"/> 
       <col width="50"/> 
       <col width="240"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       <tr> 
        <th></th> 
        <th>QTY</th> 
        <th>Supplier</th> 
        <th>WETA</th> 
        <th>CETA</th> 
        <th>Chase</th> 
        <th>Tracking</th> 
        <th>Status</th> 
       </tr> 
       </thead> 
       <tbody> 
       <col width="30"/> 
       <col width="50"/> 
       <col width="240"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       {this.props.rows.forEach((row) => { 
         <tr> 
          <td>{row.id}</td> 
         </tr> 
        } 
       )} 
       <tr> 
        <td>A</td> 
        <td>24</td> 
        <td>JC Electronics</td> 
        <td>24/06/2016</td> 
        <td>26/06/2016</td> 
        <td>27/06/2016</td> 
        <td>25/06/2016</td> 
        <td>S</td> 
       </tr> 
       </tbody> 
      </table> 
     ) 
    } 

但沒有出來的那個循環的，這是我第一次嘗試這個，所以我會做錯事，但它是什麼？

---

我似乎做已經做到了：

render() { 
     var rowData = this.props.rows.map((row) => { 
      return (
       <tr> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
        <td>{row.id}</td> 
       </tr> 
      ) 
     }); 
     return (
      <table className="table table-condensed table-hover"> 
       <thead> 
       <col width="30"/> 
       <col width="50"/> 
       <col width="240"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       <tr> 
        <th></th> 
        <th>QTY</th> 
        <th>Supplier</th> 
        <th>WETA</th> 
        <th>CETA</th> 
        <th>Chase</th> 
        <th>Tracking</th> 
        <th>Status</th> 
       </tr> 
       </thead> 
       <tbody> 
       <col width="30"/> 
       <col width="50"/> 
       <col width="240"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="80"/> 
       <col width="53"/> 
       {rowData} 
       <tr> 
        <td>A</td> 
        <td>24</td> 
        <td>JC Electronics</td> 
        <td>24/06/2016</td> 
        <td>26/06/2016</td> 
        <td>27/06/2016</td> 
        <td>25/06/2016</td> 
        <td>S</td> 
       </tr> 
       </tbody> 
      </table> 
     ) 
    } 

Answer 1

你可以不喜歡這樣。但是你可能也想渲染每行<td>，比如行的渲染方式。

_renderRow(row, index) { 
    return (
    <tr key={index}> 
     <td key="0"></td> 
     <td key="1">{row.qty}</td> 
     <td key="2">{row.supplier}</td> 
     <td key="3">{row.weta}</td> 
     <td key="4">{row.ceta}</td> 
     <td key="5">{row.chase}</td> 
     <td key="6">{row.tracking}</td> 
     <td key="7">{row.status}</td> 
    </tr> 
) 
} 

render() { 
    return (
    <table> 
     <thead> 
     <tr> 
      <th></th> 
      <th>QTY</th> 
      <th>Supplier</th> 
      <th>WETA</th> 
      <th>CETA</th> 
      <th>Chase</th> 
      <th>Tracking</th> 
      <th>Status</th> 
     </tr> 
     </thead> 
     <tbody> 
     {this.props.rows.map((row, index) => this._renderRow(row, index))} 
     </tbody> 
    </table> 
) 
}