react-native 父函数组件调用类子组件的方法，代码如下所示：
import React, {Component} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
// 父
let child
onRefbbb = (ref) => {
child = ref
}
clickccc = () => {
child.myName()
}
const Parent =()=> {
return(
<View>
<Child onRefaaa={onRefbbb} />
<TouchableOpacity onPress={()=>clickccc()}>
<Text>onClick</Text>
</TouchableOpacity>
</View>
)
}
export default Parent
// 子
class Child extends Component {
componentDidMount(){
this.props.onRefaaa(this)
}
myName = () =>{
alert(11111111111111)
}
render() {
return (<View></View>)
}
}补充：下面看下React 函数式组件之父组件调用子组件的方法
前言：
最近做一个React项目，所有组件都使用了函数式组件，遇到一个父组件调用子组件方法的问题，让我好一阵头疼。
我们都知道，React 中子组件调用父组件方法，使用 props 传递过来就可以在子组件中使用。但是父组件如何调用子组件方法呢？请看下面代码：
第一步：
在父组件中，使用 useRef 创建一个 ref
import { useRef } from 'react'
// 父组件中代码
const FCom = () => {
const cRef = useRef(null);
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}第二步：
子组件中代码：（使用了 forwardRef，useImperativeHandle）
import { forwardRef, useImperativeHandle } from 'react'
const ChildCom = forwardRef(({
// 这里是一些props参数
}, ref) => {
useImperativeHandle(ref, () => ({
getData: getData,
otherFun: otherFun
}))
function getData() {
// to do something
}
function otherFun() {
console.log('这是其他方法')
}
return (
<div>子组件</div>
)
})第三步：
此时，在父组件中就可以随心所欲的调用子组件中的方法了！
import { useRef } from 'react'
// 修改父组件中代码
const FCom = () => {
const cRef = useRef(null);
const handleClick = () => {
cRef.current && cRef.current.getData()
}
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}
