React渲染列表数据

JSX中使用{}，{}里如果放入数组，React.js会把数组里的一个个元素罗列并渲染出来。

const lessons = [
    { title: 'Lesson 1: title', description: 'Lesson 1: description' },
    { title: 'Lesson 2: title', description: 'Lesson 2: description' },
    { title: 'Lesson 3: title', description: 'Lesson 3: description' },
    { title: 'Lesson 4: title', description: 'Lesson 4: description' }
    
  ]
  class Lesson extends Component {
    /* TODO */
    render(){
      console.log(this.props);
      //这里可以看成对象的解构赋值（类比：let { log, sin, cos } = Math;），this.props是一个大对象，里面含有各种属性及其对应值。详见下面截图：
      //所以如果不用解构赋值，这里也可以写成 const less=this.props.less
      const {less}=this.props
      return(
       <div onClick={() => console.log(`${this.props.index} - ${less.title}`)}>
        <h1>{less.title}</h1>
        <p>{less.description}</p>
        <hr />
       </div>
      )
    }
  }
  
  class LessonsList extends Component {
   render(){
     return(
      <div>
      //这里的key是在掩耳盗铃
      {lessons.map((less,i)=><Lesson key={i} index={i} less={less}/> )}
       </div>
     )
   }
  }
  ReactDOM.render(<LessonsList/>,document.getElementById('root'))

this.props截图：

解构赋值：https://es6.ruanyifeng.com/#docs/destructuring#%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC