从 React 组件调用功能组件中的 function

Question

假设我有一个子组件，它是一个功能组件和一个 function a()：

export default function child({ ... }) {
 
   ...

   function a() {
      ...
   }

...

}

并说我还有一个父组件，它是 React.Component 和子组件的父组件：

class parent extends Component {

    constructor(props) {
       super(props);
       this.child= React.createRef();
    }
    
     render() {
         return(
              <child ref = {this.child}/>
         )
    }
}

我正在尝试从父组件调用 function a() 。 我知道这违反了推荐的 React 结构，但是有没有办法我怎么能做到这一点？

谢谢你。

Answer 1

您的父组件不会知道 function a()因为它的范围是您的子（功能）组件。

假设您只处理这个单一的父/子结构，另一种处理方法是在父级中声明您的 function a() ，然后将其传递给子级。

如果 function 可能在多个不相关的组件中需要，那么将 function 单独导出为“帮助器” function 将允许在不同的地方导入和使用它。

Answer 2

在child function 之外创建a function。

export function a() {
  ...
}

export default function child({ ... }) {
  a();
  ...
}

这样，您可以在child function 中a function ，也可以将其导入其他一些组件中。
顺便提一句。 React 组件应以大写字母开头 → function Child({...})