react-native 父子组件之间的传值与函数调用

父组件向子组件传值,也可以传函数

子组件接收父组件传来的值: this.props.value

子组件向父组件传值:在这里我用的是函数的回调实现的

child.js

Parent.js

父组件传给子组件方法onParentFun,然后通过方法的回调把子组件的值传给父组件

在子组件传值的过程中,函数的回调也就是子组件调用父组件的方法

父组件调用子组件方法有两种:

      一种是通过ref指向子组件,在需要的地方调用子组件中的方法,ref是组件的一种特殊属性,可以理解为,组件被渲染后,指向组件的一个引用。我们可以通过ref属性来获取真实的组件

如果ref是这样写的话ref="Child" ,调用this.refs.Child.OnChildFun();

如果ref是这样写的话ref={ (v)=>this.Child = v } ,调用this.Child.OnChildFun();

OnChildFun是子组件里面的方法

    另一种是onRef

Parent.js

child.js

当在子组件中调用onRef函数时,this.props.onRef(this),这里的参数指向子组件本身,父组件接收该引用作为第一个参数:onRef={ (v)=> this.Child = v },然后它使用this.Child保存引用,然后,可以使用this.Child在父组件内访问整个子组件实例,并且可以调用子组件函数

猜你喜欢

转载自blog.csdn.net/jiayang_Sir/article/details/105701613