如何在React Native中从父级调用子级组件中的方法

Question

如何在React Native中从父级调用子级组件中的方法？我本质上想要做的是模拟componentDidMount()对功能组件中的类组件执行的操作。

我一直收到错误消息“无法给功能组件提供引用”，我可能想使用React.ForwardRef()。

ps。 idk我将如何重新格式化儿童观察者，请原谅不良格式

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.load = React.createRef();

  componentDidMount() {
     this.load.current.loadAudio();
  }

 render(){
      latestEP.query = ref => ref.orderBy("id", "desc").limit(1);

     return(
      {latestEP.docs.map(doc => (
       <DashboardItem key={doc.id} doc={doc} ref={this.load} />
       ))}
  )
 }
}

const DashboardItem = observer(({ doc }) => {
 function loadAudio(){
   return console.log("works")}

 return (// stuff that requires loadAudio to run first)
})

Answer 1

错误“无法给引用提供功能组件”应该是不言自明的：您需要将DashItem更改为类组件而不是功能组件。

Answer 2

您可以通过使用useImperativeHandle挂钩来实现。请检查一下：https://reactjs.org/docs/hooks-reference.html#useimperativehandle

在DashItem中包装forwardRef并实现如下所示的useImperativeHandle钩子：

const DashItem = React.forwardRef(({doc}, ref) => {
  useImperativeHandle(ref, () => ({
    loadAudio: () => {
      return console.log("works");
    }
  }));
...