在反应中动态地将列添加到html表答案

【问题标题】：Dynamically add column to html table in react在反应中动态地将列添加到html表
【发布时间】：2018-12-23 03:40:28
【问题描述】：

我应该怎么做才能在 react js 的列中垂直显示数据或 reactjs 或原始 javascript 中的库中的任何组件？喜欢这个compare product table在阿里巴巴。

假设我们有这张桌子

  <table id="vertical-1">
        <caption>First Way</caption>
        <tr>
            <th>Product Name</th>
            <th>Product 1</th><th>Product 2</th><th>Product 3</th>
        </tr>
        <tr>
            <th>Image</th>
            <td>Image 1</td><td>Image 2</td><td>Image 3</td>
        </tr>
        <tr>
            <th>Price</th>
            <td>300</td><td>500</td><td>800</td>
        </tr>
        <tr>
            <th>Size</th>
            <td>S, M, L</td><td>S, XL</td><td>XL, L</td>
        </tr>
    </table>

还有这个来源

dataSource = [{
id: '1',
name: 'Product 1',
image: 'Image 1',
price: '300',
size: 'S, M, XL, L'
}, {
id: '2',
name: 'Product 2',
image: 'Image 2',
price: '500',
size: 'S, XL'
}, {
id: '3',
name: 'Product 3',
image: 'Image 3',
price: '800',
size: 'XL, L'}];

【问题讨论】：

标签： reactjs html-table react-redux

【解决方案1】：

您可以使用javascript的map方法将列动态添加到我通过数据列表迭代的表中。让dataSource成为一个状态

<table id="vertical-1">
          <thead>
               <tr>
                   <th>Name</th>
                   <th>Image</th>
                   <th>Price</th>
                   <th>Size</th>
               </tr>
           <tbody>                                
            {this.state.dataSource.map((data, i) =>
               <tr key={i}>
               <td>data.name</td>
               <td><img src={data.image}/></td>
               <td>data.price</td>
               <td>data.size</td>
               </tr>

           )}
           </tbody>
          </thead>
</table>

【讨论】：