Создать и вызвать функцию из компонентов

Question

Я думаю, это может быть простой вопрос, но мне было интересно, как и где я должен определить функцию, чтобы я мог вызывать ее из любого компонента в реагировать?

Предположим, у меня есть функция, которая прокручиваетстраница наверх всякий раз, когда определенный компонент монтируется.Я включил функцию в componentdidmount () каждого нужного мне компонента.Могу ли я определить его где-нибудь еще как app.js и просто вызвать его там, где это необходимо?Если да, должна ли функция быть включена в рендер или где-то еще.

Я использую приложение «Реагировать», кстати

Спасибо

Answer 1

Вы можете создать файл 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();
   }
}

Answer 2

Допустим, у вас есть один компонент на основе классов и функциональный компонент.

Внутри вашего компонента верхнего уровня у вас будет ...

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 будет ссылаться на реквизиты, а также на функцию, передаваемую вашему компоненту, ивыполнит функцию при клике.