在jsx中使用循环渲染

在jsx语法中使用循环渲染，主要使用场景为列表渲染，于vue不同，vue使用的是v-for循环渲染，jsx语法中不支持类似语法，如果要使用循环渲染，可以使用数组的map（）方法，注意：循环渲染列表时，应该对每一项添加对应的key属性，且key属性的值要确保唯一性

const list = [
    {
        id: 1,
        name: '笑纳'
    },
    {
        id: 2,
        name: '你的答案'
    },
    {
        id: 3,
        name: '绝不会放过'
    },
    {
        id: 4,
        name: 'Sold Out'
    }
]
export default class App extends React.Component {

    render() {
        return (
            <div>
                {list.map(x => <p key={x.id}>{x.name}</p>)}
            </div>
        )
    }
}