node.js - React js ¿cómo configurar y obtener parámetros de otro archivo?

Soy nuevo en reaccionar y me gustaría preguntar cómo enviar un parámetro a otra función en el componente de clase. Por ejemplo:

Principal.js

import React, { Component } from "react";
import Form from "./Form";
import fetchData from "./Action";

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.fetchingData = this.fetchingData.bind(this);
    this.state = {
      list: 0
    };
  }
  fetchingData(x) {
    const data = fetchData(); // => from Action.js (get the return)
    this.setState({ list: data });
  }
  componentDidMount(){
    this.fetchingData();        
  }
  render() {
    return (
      <>
        <h3>Data</h3>
        <Form />
        <p>result: {this.state.list}</p> //=>show the result and auto update when click by button
      </>
    );
  }
}

Form.js

import React from "react";
import fetchData from "./Action";

function Form() {
  const handlerClick = (v) => {
    fetchData(v); //=>set value form this function (from action.js)
  };
  return (
    <>
      <button onClick={(e) => handlerClick(1)}>Push</button>
    </>
  );
}

export default Form;

Acción.js

const fetchData = (v) => {
  return v;
};

export default fetchData;

Desde ese código me gustaría enviar el parámetro desde el botón handlerClick() dentro de esa función, está fetchData(), esta función mantendrá el parámetro y lo devolverá a Main.js para completar setState. Y el resultado se actualizará automáticamente cuando haga clic en el botón Empujar. ¿Te gustaría ayudarme a arreglar mi código?

Consulta aquí stackblitz.com/edit/react-4tknz5?file=src%2FMain.js Todo lo que tienes que hacer es pasar la función fetchingData como accesorio a <Form/> y llámalo desde allí.

Señor supremo

28 de marzo de 2021 a las 8:41

------------------------------------

Tienes que enviar la función fetchingData como accesorio al formulario, algo así como: <Form fetchingData={fetchingData} /> desde Main.js, de esa manera puedes llamar a la función desde <Form /> componente y guarde su valor.

------------------------------------

Principal.js

import React, { Component } from "react";
import Form from "./Form";
import fetchData from "./Action";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.fetchingData = this.fetchingData.bind(this);
    this.state = {
      list: 0
    };
  }
  fetchingData(x) {
    const data = fetchData(x); // => from Action.js (get the return)
    this.setState({ list: data });
  }
  componentDidMount() {
    this.fetchingData();
  }
  render() {
    return (
      <>
        <h3>Data</h3>
        <Form fData={this.fetchingData} />
        <p>result: {this.state.list}</p>
      </>
    );
  }
}

Form.js

import React from "react";
import fetchData from "./Action";

const Form = (props) => {
  const handlerClick = (v) => {
    if (props.fData) {
      props.fData(v);
    } else {
      fetchData(v); //=>set value form this function (from action.js)
    }
  };
  return (
    <>
      <button onClick={(e) => handlerClick(10)}>Push</button>
    </>
  );
};

export default Form;

Acción.js

const fetchData = (v) => {
  return v;
};

export default fetchData;

Demostración en vivo