Question

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

假设我有一个功能，只要安装了某个组件，就会将页面滚动到顶部。我已将函数包含在我需要效果的每个组件的componentdidmount（）中。我可以在app.js之类的地方定义它，只需在需要的地方调用它吗？如果是，则该函数是否应包含在渲染中或其他位置。

我正在使用create react app

由于

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将引用props，以及传递给组件的函数，并在点击时执行该函数。

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();
   }
}

从组件中创建并调用函数

2 个答案: