React学习笔记（九）列表

列表
使用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')
)