react-native 如何调用子子组件的方法或者属性

Posted 2023-03-20

参考技术A 我们在页面的render()方法中，使用了一个组件，可以是系统的如Text或者自定义的组件MyCustomText；

有两种方法可以获取该组件的实例

第一、render中使用的方法：

<MyCustomText style = ref = (myCustomText)=>this.myCustomText = myCustomText>

</MyCustomText>

其他地方，如定义了一个submit函数

submit()

//在该函数中想要使用MyCustomText的一个方法show，那么就可以这样调用啦

this.myCustomText.show();



第二、render中使用的方法：

<MyCustomText style = ref = 'myCustomText'>

</MyCustomText>

其他地方，如定义了一个submit函数

submit()

//在该函数中想要使用MyCustomText的一个方法show，那么就可以这样调用啦

this.refs.mycustomText.show();

react-native--基础（方法调用）

导语：最近写代码，封装组件，手势动画时，经常遇到方法调用。特别是ES5，ES6混用的时候，脑子一直不清晰。发觉还是代码写的少了，缺乏总结。
方法调用的时候，经常会出现错误。然后在调试的时候，会改动一两次，不能一次性写正确。

今天特总结如下：

import React,Component from 'react'
import 
    StyleSheet,
    View,
 from 'react-native'

import CommitButton from './CommitButton'

alertMsgout=()=>
    alert("alertMsgout");
    //调用后执行：
    //onPress=alertMsgout
    //onPress=()=>alertMsgout()



export  default class ActionCustom extends Component
    render()
        return(
            <View>
                <CommitButton
                text='hello'
                onPress=()=>alertMsgout()/>
            </View>
        );
    

    alertMsgin()
        alert("alertMsgin");
        //立即执行：
        // onPress=this.alertMsgin()
        //调用后执行：
        // onPress=()=>this.alertMsgin()
    

    alertMsginInfo=()=>
        alert("alertMsginInfo");
        //立即执行：
        //onPress=this.alertMsginInfo()
        //调用后执行：
        // onPress=this.alertMsginInfo
    

注：每个方法中的调用方法：都在render中的函数onPress中调用，执行时区分立即执行，即打开页面未执行任何操作方法立即执行；调用后执行，即操作之后调用方法，方法才会执行。

CommitButton是一个封装的组件。