//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id:2,text:'js'},{id:3,text:'php'},{id:4,text:'python'},{id:5,text:'node'}]}render(){const arr = this.state.list;const arr2 = this.state.list2;const listItem = []const listItem2 = []//map方式遍歷arr.map((item)=>{let li = <li>{item}</li>;listItem.push(li);})//或for循環// for (let i = 0; i < arr.length; i++) {// let li = <li>{arr[i]}</li>;// listItem.push(li);// }for (let i = 0; i < arr2.length; i++) {let li = <li key={arr2[i].id}>{arr2[i].text}</li>;listItem2.push(li);}return <div><ul>{listItem}{listItem2}</ul></div>}}ReactDOM.render(<List />,document.getElementById('app')); 復制代碼

總結

以上是生活随笔為你收集整理的React的列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。