组件

• props 传递数据
• props 传递函数
• props 类型检查

vue是通过 this.$emit(‘name’)

import PropTypes from 'prop-type'
class List extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const {list} = this.props;
    return 
      <ul>
        {
          list.map((item) => <p key={item.id}>{item.title}</p>)
        }
      </ul>
  }
}
// 类型检查
List.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired
}
class Input extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: ''
    }
  }
  render() {
    return <div>
      <input value={this.state.title} onChange={this.onTitleChange} />
      <button onClick={this.onSubmit}>submit</button>
    </div> 
  }
  onSubmit = () => {
    this.props.onSubmitTitle(this.state.title);
  }
}
class TodoList extends React.Component {
  // 状态提升，本身是List组件使用的数据，被提升到上一层的组件中去
  render() {
    return <div>
      <Input submitTitle={this.onSubmitTitle}/>
      <List list={this.state.list} />
    </div>
  }
}