Rendering Lists(怎么在react中渲染List)

运用map函数

class Counter extends Component {
    state = {
        tags: ['tag1','tag2','tag3']
    };
    render() { 
        return (
            <div>
                <ul>
                    { this.state.tags.map(tag => <li>{ tag }</li>) }
                </ul>
            </div>
        );
    }
}

运行，会发现控制台报错：
Warning: Each child in an array or iterator should have a unique "key" prop.
每个数组的迭代项都要有一个唯一的key

• 造成这个错误的原因，是react要区分每个列表项，以致react的虚拟dom改变的时候，react能马上反应过来什么组件改变了，然后就要重新渲染浏览器dom以确保同步。
• 所以，如果要渲染一个列表的项，在每个列表项生成时，要设置它的key属性。
  如，这里把key设置为一个动态的量：

{ this.state.tags.map(tag => <li key={ tag }>{ tag }</li>) }

• 因为这里的每个tag都是字符串，他们是各不相同的。所以我们可以用作key的值。在其他情况，我们的tag可能是对象，它有自己的标签，我们可以使用{tag.id}的形式来使用。
• 注意：这里的key在列表中是唯一的，但是这个key不用在整个程序内是唯一的，每个key的唯一性只在当前列表有效。
• 保存修改，再回到浏览器中，发现报错已经消失了。