JSX에서 데이터를 반복하는 방법

Question

안녕하세요, 내 UI에 표시하려는 데이터가 있습니다. 나는 리튬의

내가 주변에 내 머리를 정리하지 못할 jsx

내부 루프 수 있도록하고 싶습니다

, 너희들이 내게 줄 수에 ProductTypeID 및 ProductTypeName의 데이터를 시도하고 표시 루프를 할 수 있도록하려면 힌트? 나는 데이터를 다루는 것이 좋지 않고 tru를 반복한다.

[{ 
    "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 
}] 

Answer 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>); 
} 

Answer 2

당신은 map를 사용하여 렌더링 방법 같은 것을 할 수 있습니다.

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