父子组件通讯

父组件通过props 传递给子组件, props可以是 函数, 其他值.

子组件通过调用父组件传递过来的 函数来向父组件传递数据.

对于一些只负责渲染的组件,也就是无状态的组件,通常把state提升到父组件中. 由父组件统一管理.

class TodoList extends React.Component {
  state = {
    list:[1, 2, 3]
  }

  addTolist = (item)=>{
    this.setState({
      list:[...this.state.list].push(item)
    });
  }

  render() {
    return (
      <div>
        <AddBtn addToList={this.addTolist}/>
        <List list={this.state.list}/>
      </div>
    )
  }
}


function AddBtn(props){
  const { addToList } = props;
  return (
    <button onClick={()=>{addToList(4)}}>add</button>
  );
}

跨级组件通讯

使用context 或者 redux