15、列表渲染(对标Vue的 v-for)
【实现思路】
- 基础:数组的元素是 JSX 语法的 DOM,该数组作为 JSX 语法的 DOM,可以自动拼起来;
- 实现:遍历数组,然后将将数组元素变为 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 也勉勉强强了(至少不会报错)。