如何在 JSX 中循环尝试数据答案

【问题标题】：How to loop try data in JSX如何在 JSX 中循环尝试数据
【发布时间】：2016-08-29 13:45:11
【问题描述】：

您好，我想在 UI 中显示这些数据。我希望能够循环尝试数据并在 li 中显示 ProductTypeID 和 ProductTypeName

我希望能够在 jsx 中循环

我无法理解它，你们能给我一个提示吗？我不太擅长处理数据并循环使用它。

[{
  "ProductTypeID": 14,
  "ProductTypeName": "ItemName1",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": null
}, {
  "ProductTypeID": 1,
  "ProductTypeName": ItemName2",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": false
}, {
  "ProductTypeID": 10,
  "ProductTypeName": "ItemName3",
  "ProductTypeImageUrl": "",
  "ProductTypeThumbUrl": "",
  "ProductTypeIconUrl": "",
  "IsActive": 1,
  "ProductTypeBlueImage": null,
  "Is3HourRent": true
}]

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

render() {
 var data = [{
  'ProductTypeID': 14,
  'ProductTypeName': 'ItemName1'
 }, 
 {
  'ProductTypeID': 15,
  'ProductTypeName': 'ItemName2'
 }];

 return (<ul>
  {data.map((item) => {
   return (<li key={item.ProductTypeID}>
     <span>ID: {item.ProductTypeID}</span>
     <span>Name: {item.ProductTypeName}</span>
   </li>);
  })}
 </ul>);
}

【讨论】：

两个答案都是正确的，帮助我理解了如何在 JSX 中映射 tru 数据。谢谢 Alexey Pedyashev

【解决方案2】：

您可以在您的渲染方法中使用map 执行类似的操作。

render(){
  return <ul>
         {data.map(item => <li key={item.ProductTypeID}>{item.ProductTypeID}</li>)}
         </ul>
}

【讨论】：

两个答案都是正确的，帮助我理解了如何在 JSX 中映射 tru 数据。谢谢金弹
由于使用或箭头功能，我确实更喜欢您的回答