React(9)列表渲染(对标Vue的 v-for)

x33g5p2x  于2022-03-06 转载在 其他  
字(0.7k)|赞(0)|评价(0)|浏览(274)

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 也勉勉强强了(至少不会报错)。

相关文章