react父子组件数据传递

雨点打透心脏的1/2处 2021-10-01 02:28 505阅读 0赞

子传父

1.首先父组件设定一个自定义函数

  1. getChildDatas = (values) => {
  2.     //...业务代码
  3. }

2.将该函数暴露在子组件的引用上

  1. <Child
  2.    getChildDatas = {this.getChildDatas } 
  3. />

3.在子组件内使用

  1. this.props.getChildDatas (values);

父传子

1.直接将要传递的数据暴露在子组件的引用上

  1. state = {
  2.     visible: false,
  3. }
  4. <Child
  5.    getChildDatas = {this.getChildDatas } 
  6.    visible={this.state.visible}
  7. />

2.在子组件内使用

  1. render() {
  2.     const { visible } = this.props;    //this.props 就是从父组件传递过来的数据，在此将其解构取出visible 这个要用的属性
  3.     return (
  4.         <Modal
  5.             visible={visible}
  6.         />
  7.     );
  8. }

转载于:https://www.cnblogs.com/wyangnb/p/9400336.html

发表评论

表情：
评论列表 （有 0 条评论，505人围观）

还没有评论，来说两句吧...

相关阅读