javascript - react 子组件怎么向父组件传值
天蓬老师
天蓬老师 2017-04-10 17:29:45
0
7
495

父组件向子组件传值,是直接用props,但有时需要数据交护,
1.此时子组件怎么向父组件传值呢,
2.还有就是兄弟组件之间的传值呢

还望指教,提供一个清晰点的思路,先在这里谢谢了:

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(7)
迷茫

父组件props进去
或者redux
实在不行你还可以用jQuery的选择器

迷茫

对于复杂组件间传值,使用 redux 应该是坠吼的选择

阿神
  1. 子组件向父组件传值可以通过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;
  ...
  1. 兄弟组件之间传值最好通过改变state来实现,这样避免组件和组件之间耦合在一起。

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

阿神

https://segmentfault.com/q/10...

洪涛

redux;
或者
父组件传递一个可以改变自己状态的方法给子组件,子组件通过调用父组件传过来的方法来改变父组件的数据。

迷茫

我觉得 除了redux 应该合理的就是父亲传方法给儿子了~~

小葫芦

涉及到子组件向父组件传递数据可以使用回调函数(通过props传入到子组件),将需要处理的数据(通常是更新的state)传递给父组件,在父组件中处理,子组件不要有自己的state.

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!