React基础之组件通信

1.父组件传子组件

class Parent extends React.Component {
  state = {
    name: "zs",
  };
  render() {
    return (
      <div>
        <Child
          name={this.state.name}
        />
      </div>
    );
  }
}
class Child extends React.Component {
  render() {
    return (
        <div>{this.props.name}</div>
    );
  }
}

2.子组件传父组件

class Parent extends React.Component {
  getChildrenValue(data) {
    console.log(data);
  }
  render() {
    return (
      <div>
        <Child
          getValue={this.getChildrenValue.bind(this)}
        />
      </div>
    );
  }
}
class Child extends React.Component {
  state = {
    value: "lisi",
  };
  clickHandler() {
    this.props.getValue(this.state.value);
  }
  render() {
    return (
        <button onClick={this.clickHandler.bind(this)}>按钮</button>
    );
  }
}

3.兄弟组件传值
概念：由父组件统一管理状态和方法并赋予给子组件

class Count extends React.Component{
  state={
    count:0
  }
  addOne(){
    this.setState({
      count:this.state.count+1
    })
  }
  render(){
    return(
      <div>
        <Child1 count={this.state.count} />
        <Child2 addOne={this.addOne.bind(this)}  />
      </div>
    )
  }
}
class Child1 extends React.Component{
  render(){
    return(
      <h1>计数器:{this.props.count}</h1>
    )
  }
}
class Child2 extends React.Component{
  render(){
    return(
      <button onClick={this.props.addOne.bind(this)}>按钮</button>
    )
  }
}

4.实现多个跨组件传值

const { Provider, Consumer } = React.createContext();
class App extends React.Component {
  render() {
    return (
      <Provider value="zs">
        <div>
          <Child />
        </div>
      </Provider>
    );
  }
}
const Child = (props) => {
  return (
    <div>
      <GrandSon />
    </div>
  );
};
const GrandSon = (props) => {
  return <div>
    <Consumer>
      {data=><div>{data}</div>}
    </Consumer>
  </div>;
};