React（9）列表渲染（对标Vue的 v-for）

15、列表渲染（对标Vue的 v-for）

【实现思路】

1. 基础：数组的元素是 JSX 语法的 DOM，该数组作为 JSX 语法的 DOM，可以自动拼起来；
2. 实现：遍历数组，然后将将数组元素变为 JSX 语法的 DOM，得到一个新的数组（元素是 JSX 的 DOM），将这个新数组作为变量插入到渲染元素中即可。

如以下代码：

class HelloWord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [1]
        }
        this.add = this.add.bind(this)
    }

    render() {
        console.log(this.state)
        let DOM = this.state.list.map((item, index) => (<li key={index}>{item}</li>))

        return <div>
            <p>列表元素：</p>
            <ul>
                {DOM}
            </ul>
            <button onClick={this.add}>点击添加一个列表元素</button>
        </div>
    }

    add() {
        this.state.list.push(parseInt(Math.random() * 1000))
        this.setState({
            list: this.state.list
        })
    }
}

【key】

注意，必须在列表的标签里设置唯一的 key 属性，不然会抛出异常（虽然还会正常执行）。

通常建议使用 id（因为 id 一般唯一）来作为 key，实在不行，使用数组的索引作为 key 也勉勉强强了（至少不会报错）。