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

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

15、列表渲染(对标Vue的 v-for)

【实现思路】

  1. 基础:数组的元素是 JSX 语法的 DOM,该数组作为 JSX 语法的 DOM,可以自动拼起来;
  2. 实现:遍历数组,然后将将数组元素变为 JSX 语法的 DOM,得到一个新的数组(元素是 JSX 的 DOM),将这个新数组作为变量插入到渲染元素中即可。

如以下代码:

  1. class HelloWord extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {
  5. list: [1]
  6. }
  7. this.add = this.add.bind(this)
  8. }
  9. render() {
  10. console.log(this.state)
  11. let DOM = this.state.list.map((item, index) => (<li key={index}>{item}</li>))
  12. return <div>
  13. <p>列表元素:</p>
  14. <ul>
  15. {DOM}
  16. </ul>
  17. <button onClick={this.add}>点击添加一个列表元素</button>
  18. </div>
  19. }
  20. add() {
  21. this.state.list.push(parseInt(Math.random() * 1000))
  22. this.setState({
  23. list: this.state.list
  24. })
  25. }
  26. }

【key】

注意,必须在列表的标签里设置唯一的 key 属性,不然会抛出异常(虽然还会正常执行)。

通常建议使用 id(因为 id 一般唯一)来作为 key,实在不行,使用数组的索引作为 key 也勉勉强强了(至少不会报错)。

相关文章