我如何在Reactjs中遍历表行和单元格 [英] How do I iterate through table rows and cells in Reactjs

问题描述

我对Reactjs还是很陌生，我有一个从我的数据库中加载json的组件，看起来像这样

I am pretty new to Reactjs and i have a component that loads json from my db that looks like this

Array[2]
0: Object
_id: "56cf587fe46adb3b8960afe2"
price: 2000
title: "ps3"
url: "www.google.com"
__proto__: Object
1: Object
_id: "56db2bd434df9046e0643d22"
price: 499
title: "HENRIKSDAL"
url: "http://www.ikea.com/se/sv/catalog/products/S59847817/"
__proto__: Object
length: 2
__proto__: Array[0]

我要做的是将数据加载到看起来像这样的表上

what i want to do is to load the data on to the table that looks like this

//start of loop
<tr>
                          <td className="col-sm-8 col-md-6">
                          <div className="media">

                              <div className="media-body">
                                  <h4 className="media-heading"><a href="#">Product name</a></h4>
                              </div>
                          </div></td>
                          <td className="col-sm-1 col-md-1" styles="text-align: center">
                          <input type="number" name="quantity" min="1" max="10" className="form-control"/>
                          </td>
                          <td className="col-sm-1 col-md-1 text-center"><strong>500:-</strong></td>
                          <td className="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
                          <td className="actions" data-th="">
              <button className="btn btn-info btn-sm"><i className="fa fa-refresh"></i></button>
              <button className="btn btn-danger btn-sm"><i className="fa fa-trash-o"></i></button>
                         </td>
                      </tr>
                      <tr>
                          <td>   </td>
                          <td>   </td>
                          <td>   </td>
                          <td><h3>Total</h3></td>
                          <td className="text-right"><h3><strong>$31.53</strong></h3></td>
                      </tr>
    //end of loop

但是我不知道如何遍历数组，因此它将为数组中的每个对象创建一个表行.有什么建议?

But i don't know how to iterate through the array so it will create a tablerow for each object in the array. Any suggestions?

推荐答案

您可以映射数组并将数据传递到html

You can map the array and pass the data through to the html

        {this.state.data.map(( listValue, index ) => {
          return (
            <tr key={index}>
              <td>{listValue.id}</td>
              <td>{listValue.title}</td>
              <td>{listValue.price}</td>
            </tr>
          );
        })}

这篇关于我如何在Reactjs中遍历表行和单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！