React 虚拟Dom + React.createElemen

React.createElement方法 已组件通信文章里的子组件为例子

import React, {Component} from 'react'
import PropTypes from 'prop-types' //导入prop-types

class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.del = this.del.bind(this)
  }

  render() {
    const {content} = this.props
    /* Jsx 先变成了虚拟Dom（Js对象）之后再被转化成真实的Dom */

    /* Jsx模版语法
     * return (
     *   <li>
     *     {content}
     *     <button onClick={this.del}>删除</button>
     *   </li>
     * )
     */

    /* React.createElement方法
     * Jsx模版通过 React.createElement 方法变成Js对象
     * React.createElement 接收三个参数 
     * 1. type: Html标签  
     * 2. props: Html属性（class、id等） 
     * 3. children: 内容
     * */
    return React.createElement(
      'li',
      {},
      content,
       React.createElement(
         'button',
         {onClick: this.del},
         '删除'
       )
    )
  }

  del() {
    const {deleteItem, index} = this.props
    deleteItem(index)
  }
}

export default TodoItem