reactjs - 从组件创建和调用函数

Question

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

假设我有一个功能可以在安装某个组件时将页面滚动到顶部。我已经在我需要效果的每个组件的 componentdidmount() 中包含了该功能。我可以在 app.js 之类的其他地方定义它，然后在需要的地方调用它吗？如果是，该功能是否应该包含在渲染中或其他地方。

顺便说一句，我正在使用创建反应应用程序

谢谢

Answer 1

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

在您的顶级组件中，您将拥有...

import React, {Component} from 'react'

class MyApp extends Component {

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

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

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

在您的其他组件内部

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

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

Answer 2

您可以创建一个 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();
   }
}