从 React 组件调用功能组件中的函数

Posted 2023-03-16

【中文标题】从 React 组件调用功能组件中的函数

【英文标题】：Calling a function in functional component from a React component

【发布时间】：2021-08-16 17:00:11

【问题描述】：

假设我有一个子组件，它是一个函数组件和一个函数 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/>
         )
    

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

谢谢。

【问题讨论】：

所以你想在父组件中调用子组件的函数a()？

您可以重新设计函数 a 并将其移动到父级，然后将该函数作为道具传递给子级。如果您分享一个最小的可重现示例（codesandbox 会很棒），那就更好了。

您可以将函数从父组件传递给子组件，但不能反过来

【参考方案1】：

在child 函数之外创建a 函数。

export function a() 
  ...


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

这样你可以在child函数内部调用a函数，也可以在其他组件中导入。 顺便提一句。 React 组件应该以大写字母开头 → function Child(...)

【参考方案2】：

您的父组件不会知道函数 a()，因为它的作用域是您的子（功能）组件。

如果您只处理这个单一的父/子结构，则处理此问题的另一种方法是在父级中声明您的函数a()，然后将其传递给子级。

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