react-native回调函数的写法

react-native中使用回调函数的频率是比较高的,特别在子组件传值给父组件时显得极其重要而且也是比较好用的一个方式!(父组件传值给子组件时使用props)。

这里记录下回调函数的写法:函数方式和变量方式

函数方式:

传递回调的函数和回调函数本身是两个不一样的(分别写着两个函数里面)

步骤:

1. 父组件中定义回调函数

react-native回调函数的写法_第1张图片

this.forceUpdate() :强制刷新界面,在props或者state没有改变的情况下刷新界面。

2. 父组件中将回调函数传递到子组件中
react-native回调函数的写法_第2张图片

注意:回调函数本身是一个单独的函数式,需要传递一个箭头函数到子组件中,主要在子组件中只有直接使用对应的变量名来调用这个回调函数 ==>> 这里在子组件中可以直接用 cbList() 调用这个回调函数。

3. 子组件中调用回调函数

react-native回调函数的写法_第3张图片

变量方式:

将回调函数定义成一个变量写在 传递回调的这个函数里面(只需要一个函数就可以了)

1. 父组件中定义传递回调函数并在里面定义回调函数变量

react-native回调函数的写法_第4张图片

2. 子组件中调用回调函数

react-native回调函数的写法_第5张图片

 

总结:函数方式时需要以箭头函数的方式传递到子组件中

           变量方式时只需要传递对应的变量即可,因为这个变量调用的就是一个箭头函数

           调用回调时是否有参数 需要看 回调函数本身定义时是否 接收参数

页面效果:

注意:我这个demo只是改变了想要item右侧的状态。

 

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出

 

你可能感兴趣的:(react,native)