Reactjs 从组件生成并调用函数

我想这可能是一个简单的问题，但我想知道应该如何以及在哪里定义一个函数，以便可以从react中的任何组件中调用它

假设我有一个函数，每当安装某个组件时，它都会将页面滚动到顶部。我已经在componentdidmount（）中包含了我需要效果的每个组件的函数。我可以在其他地方定义它，比如app.js，然后在需要的地方调用它吗？如果是，该函数应包含在渲染中还是其他地方

顺便说一下，我正在使用CreateReact应用程序

---

谢谢

假设您有一个基于类的组件和一个功能组件

在顶级组件中，您将拥有

import React, {Component} from 'react'

class MyApp extends Component {

  myLogHandler = () => {
    console.log("Hello World")
  }

  render() {
    return (
      <MyOtherComponent clicked={this.myLogHandler}>
    )
  }
}

import React，{Component}来自“React”
类MyApp扩展组件{
myLogHandler=（）=>{
log（“你好世界”）
}
render（）{
返回(
)
}
}

您只需使用上述语法将函数作为道具传递

在你的另一个组件里面

const myOtherComponent {
  <button onClick={props.clicked}>HelloWorld</button>
}

const myOtherComponent{
你好世界
}

---

props.clicked将引用道具和传递给组件的函数，并在单击时执行该函数。

您可以创建一个utils.js文件并在其中定义函数。 比如,

export default function scrollToTheTop () {
// do the logic here
}

您可以在组件中导入和使用它，例如

import React, {Component} from "react";
import {scrollToTheTop} from ./utils;

class SampleComponent extends Component {
   componentDidMount() {
      scrollToTheTop();
   }
}