文章29 | 阅读 13705 | 点赞0
【实现思路】
如以下代码:
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 也勉勉强强了(至少不会报错)。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq20004604/article/details/79318207
内容来源于网络,如有侵权,请联系作者删除!