列表 使用map()函数让数组中的每一项翻倍,我们得到了一个新的数列doubled const numbers = [1,2,3,4,5]; const doubled = numbers.map((number) => number*2); console.log(doubled); const numbers = [1,2,3,4,5] const listItems = numbers.map((number) => <li>{number}</li>) ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('list') ) 基础列表组件 运行这段代码,将会看到一个警告 a key should be provided for list items ,意思是当你创建一个元素时,必须包括一个特殊的 key 属性。 function NumberList(props) { const numbers = props.numbers const listItems = numbers.map((number) => <li>{numbers}</li>) return( <ul>{listItems}</ul> ) } const numbers = [1,2,3,4,5] ReactDOM.render( <NumberList numbers={numbers}/>, document.getElementById('list') ) //分配key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ) return( <ul>{listItems}</ul> ) } const numbers = [1,2,3,4,5] ReactDOM.render( <NumberList numbers = {numbers}/>, document.getElementById('list2') ) //元素的key在他的兄弟元素之间应该唯一 function Blog(props) { const sidebar = ( <ul> {props.posts.map((post) => <li key={post.id}> {post.title} </li> )} </ul> ) const content = props.posts.map((post) => <div key={post.id}> <h3>{post.title}</h3> <h3>{post.content}</h3> </div> ) return( <div> {sidebar} <hr/> {content} </div> ) } const posts = [ {id:1,title:'hello world',content:'welcome to learning React!'}, {id:2,title:'installation',content:'you can install React from npm'} ] ReactDOM.render( <Blog posts = {posts}/>, document.getElementById('list3') )
React学习笔记(九)列表
最新推荐文章于 2024-09-13 15:06:03 发布