react 子组件怎么向父组件传值

Question

父组件向子组件传值，是直接用props，但有时需要数据交护，1.此时子组件怎么向父组件传值呢，2.还有就是兄弟组件之间的传值呢还望指教，提供一个清晰点的思路，先在这里谢谢了：

三叔 · Answer

子组件向父组件传值可以通过context, context可以跨级从父组件向子组件传值，也可以子组件来获取和设置父组件暴露出来的属性值，比如下面的代码就是子组件向父组件注册自己：

// 父组件
class Form extends React.Component {
  constructor(props) {
    ...
  }

  getChildContext() {
    return {
      form: {
        addComponent: this.addComponent,
        removeComponent: this.removeComponent
      }
    }
  }
  ...
}

Form.defaultProps = {preventDefault: true};
Form.childContextTypes = {form: React.PropTypes.object};

export default Form;

// 子组件
class EmailInput extends React.Component {
  constructor(props) {
    ...
  }

  componentDidMount() {
    this.context.form.addComponent(this);
  }

  componentWillUnmount() {
    this.context.form.removeComponent(this);
  }
}

EmailInput.contextTypes = {
  form: React.PropTypes.object
};

export default EmailInput;
  ...

兄弟组件之间传值最好通过改变state来实现，这样避免组件和组件之间耦合在一起。

当然，如果没有必要的话，或者是普通的数据传递，建议最好还是通过state的改变来实现。

react 子组件怎么向父组件传值

Antworte allen(1)Ich werde antworten