React入門-6.列表渲染

列表渲染

在React中，將一個列表渲染到頁面中的方式與JS遍歷數組打印到控制檯的思路相似。我的以爲這個沒有VUE的列表經過指令在編寫代碼上簡單。

React的思路是在render中遍歷集合，而後迭代渲染出React Element,最後返回。須要注意的是迭代產出的React Element須要添加key屬性用於標識每一個元素。react在動態刪除，修改，添加節點的時候須要識別他們。

案例以下：

class MyList extends React.Component{
    constructor(props){
      super(props);
      this.state = {users:[]}
    }
    // 組件綁定的時候爲state賦值
    componentDidMount(){
      this.setState(state=>({
        users:[{id:1,name:'tom'},{id:2,name:'jacky'},{id:3,name:'lisa'}]
      }))
    }
    // 列表渲染，先將列表渲染到一個變量中,而後再設置到ul標籤中進行返回
    render(){
      let list = this.state.users;
      return (
        <ul>
          {
            list.map((item)=>{
              return (<li key={item.id}>{item.name}</li>)
            })
          }
        </ul>
      )

      /*
      let list = this.state.users.map((item)=>{
        return (
          // key屬性幫助react識別每一個li，在添加節點，移除節點，修改節點的時候都會用到，通常要惟一標識
          <li key={item.id}>{item.name}</li>
        );
      })
      return (
        <ul>{list}</ul>
      )
      */
    }
  }
  ReactDOM.render(<MyList/>,document.getElementById('app'));