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 <p>/
<p > 列表元素:</p > <ul > {
- DOM
- } < /ul>/
<button onClick={this.add}> 点击添加一个列表元素 </button > </p>
- }
- add() {
- this.state.list.push(parseInt(Math.random() * 1000)) this.setState({
- list: this.state.list
- })
- }
- }
- /
- key/
注意, 必须在列表的标签里设置唯一的 key 属性, 不然会抛出异常 (虽然还会正常执行)
通常建议使用 id(因为 id 一般唯一) 来作为 key, 实在不行, 使用数组的索引作为 key 也勉勉强强了 (至少不会报错)
来源: https://www.2cto.com/kf/201802/721124.html