Question

我应该怎么做才能在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'}];

Answer 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>

动态将列添加到html表中

1 个答案: