React-组件通信

1. 父组件向子组件通信

方法: 父组件通过props向子组件传递信息,子组件得到props后可进行相关处理

class Parent extends React.Component {
  render() {
    return <ChildA title="parent title" />;
  }
}
class ChildA extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: this.props.title
    };
  }
  render() {
    return <h1>{this.state.title}</h1>;
  }
}

2. 子组件向父组件通信

子组件向父组件通信依靠parent传下来的回调函数执行,改变parent组件的状态

case1: 子组件修改父组件的状态state

方法: 父组件向子组件传递一个函数,作为子组件的props,这个函数包含父组件的setState方法,并且接收一个参数,表示父组件的新的state
Parent

class Father extends React.Component {
  constructor() {
    super();
    this.state = { value: "" };
  }
  setValue = (value) => {
    this.setState({
      value
    });
  };
  render() {
    return (
      <div>
        <div>I'm Father</div>
        <div>value: {this.state.value} </div>
        <Child setValue={this.setValue} />
      </div>
    );
  }
}

Child

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputVal: "" };
  }
  handleInputChande = (e) => {
    this.setState({
      inputVal: e.target.value
    });
  };
  handleDivClick = () => {
    const { setValue } = this.props;
    setValue(this.state.inputVal);
  };
  render() {
    return (
      <div>
        <div>I'm Child</div>
        <input onChange={this.handleInputChande} />
        <div onClick={this.handleDivClick}>click to change Father's state</div>
      </div>
    );
  }
}

case2: state定义在子组件中

父组件只是需要拿到子组件的state
方法: 在父组件定义一个函数,接收子组件的state,然后将这个函数以props的形式传递给子组件. 子组件通过this.props拿到这个函数,将子组件本身的state作为函数参数,执行这个函数即可.
Parent

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }
  onChange = (value) => {
    this.setState({ value });
  };
  render() {
    return (
      <div>
        <div>I'm Parent</div>
        <div>value: {this.state.value}</div>
        <Child onChange={this.onChange} />
      </div>
    );
  }
}

Child

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childValue: ""
    };
  }
  childValChange = (e) => {
    this.childVal = e.target.value;
  };
  childValDispatch = () => {
    const { onChange } = this.props;
    this.setState(
      {
        childVal: this.childVal
      },
      () => {
        onChange(this.state.childVal);
      }
    );
  };
  render() {
    return (
      <div>
        I'm Child
        <div>
          state that defined at childVal
          <input onChange={this.childValChange} />
          <div onClick={this.childValDispatch}>notification</div>
        </div>
      </div>
    );
  }
}

3. 兄弟组件间通信

方法1 依赖共同的Container

兄弟组件依赖共有的顶级Container处理或者第三方的状态管理器.
兄弟A的value发生变化,分发的时候把Value值告诉一个中间者C, C会自动告诉B, 实现B的自动Render
Container

class Container extends React.Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }
  setValue = (value) => {
    this.setState({
      value
    });
  };
  render() {
    return (
      <div>
        <div> I'm Container </div>
        <ChildA setValue={this.setValue} />
        <ChildB value={this.state.value} />
      </div>
    );
  }
}

ChildA

class ChildA extends React.Component {
  handleChange = (e) => {
    this.value = e.target.value;
  };
  handleClick = () => {
    const setValue = this.props.setValue;
    setValue(this.value);
  };
  render() {
    return (
      <div>
        <div> I'm ChildA</div>
        <input onChange={this.handleChange} />
        <button onClick={this.handleClick}>notify</button>
      </div>
    );
  }
}

ChildB

function ChildB(props) {
  return (
    <div>
      <div> I'm ChildB</div>
      <div> value: {props.value}</div>
    </div>
  );
}