Question

假设我有一个子组件，它是一个函数组件和一个函数 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 结构，但有什么方法可以做到这一点？

谢谢。

Answer 1

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

一种不同的处理方式，假设您只处理这个单一的父/子结构，将在父级中声明您的函数 a()，然后将其传递给子级。

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

Answer 2

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

export function a() {
  ...
}

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

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

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

2 个答案: