Question

你好，我是React Native的新打字员，在此示例代码中，我想从父类的parentCall函数中的子组件调用testChild函数，而我不知道如何保留每个子组件的引用我无法更改子组件代码如何为每个子组件调用testChild？

class parent extends React.Component {
   public render(): JSX.Element {
        return (
         <child/>
         <child/>
               )
 public parentCall(): void{
   //call testChild for each Child component ??
}

}
class child extends React.Component {
 public render(): JSX.Element {
        return (
               <Text>Text</Text>
               )

 public testChild (): string{
   return Data ;
}

Answer 1

如果我对您的理解正确，则可以将每个<Child />组件存储在类似const children: JSX.Element[] = [Child, Child]的数组中。 render方法允许您传递要渲染的组件数组，因此，这样做的好处是，您现在有了一个可以循环执行testChild的变量。

Answer 2

我通过使用res解决问题并定义childRef字段并使用此代码将子组件的引用存储在childRef

中

private onRef= (ref) => this.childRef= ref

并将其设置在子组件中

<child ref={this.onRef} />

现在使用childRef，我可以调用其方法

childRef.testChild()

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

2 个答案: