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

【问题标题】：Calling a function in functional component from a React component从 React 组件调用功能组件中的函数
【发布时间】：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 会很棒），那就更好了。
您可以将函数从父组件传递给子组件，但不能反过来

标签： javascript reactjs components react-component react-functional-component

【解决方案1】：

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

export function a() {
  ...
}

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：