Question

我已经通过props.mydata下的prop将对象传递给组件。

数据如下：

{
    "global": "1"
    "list": {
        "cars": [
            {
                "name": "carname1"
            },
            {
                "name": "carname2"
            }
        ]
    }
}

这是组件：

const Cars = (props) => <div>
    <div>
        <Cars>
            <ul>
                <li>
                    <p>Car Name: {props.data.list.cars.name} </p> 
                </li>
            </ul>
        </Cars>
        </div>



</div>

export default Cars

我已经尝试过地图，但是却遇到错误，所以我的问题是如何创建具有汽车名称字段值的<li></li>列表？

Answer 1

类似的东西应该对您有用。

map是一个循环函数，您可以从列表中运行它。

const Cars = (props) => <div>
    <div>
        <ul>   
            {props.data.list.cars.map(car => (
              <li>
                  <p>Car Name: {car.name} </p>
              </li>
            ))}           
          </ul>
    </div>
</div>

使用UL LI在渲染中使用Javascript React列表对象

1 个答案: