Javascript 在react中，是否有方法使用组件或共享文件中的函数？

我试图访问基于类的组件中的函数，该组件可以在整个项目中使用。我之所以认为基于类，是因为这些请求/函数需要在每次访问此类数据之前调用init（）方法。例如：

SharedSDKFile.js

import Facebook from 'facebook-sdk';

class SharedSDKFile extends Component {
   constructor() {
      Facebook.init({// init some stuff})
   }

  async user() {
    return Facebook.getUser()
  }

  render() {
    return(// ????????????????)
  }
}

// *****************************************************
Dashboard.js
// *****************************************************
import Facebook from '../{path}/SharedSDKFile'

const dashboard = () => {
   let [person,setPerson] = useState()

// cool function to get and set Users
   let user = getUser();
   setPerson(user)
// End of cool function

}

我甚至尝试用一种不同的方法构建它，只是导出函数

SharedSDKFile.js

async init() {
  // init stuff
}

export const getUser = async(data) => {
   init()
   // get user
}

// *****************************************************
Dashboard.js
// *****************************************************
import {getUser}from '../{path}/SharedSDKFile'

const dashboard = () => {
 let [person,setPerson] = useState()

// cool function to get and set Users
   let user = getUser();
   setPerson(user)
// End of cool function
}

当导出函数的文件工作时，该状态在重新加载/刷新时消失

也许有更好的解决办法，我想得太多了。我考虑过redux或localstate，但我在sharedSDKFile.js中会有几个函数，这需要几个操作和简化程序

---

例如，如果我要导入每个需要的文件中的FacebookSDK，我会尝试阻止调用多个init（）和冗余。

我喜欢使用上下文单例方法来隔离可在应用程序范围内使用的外部服务，这可能适合也可能不适合您的需要。它使用上下文提供者/使用者，而不是像Redux这样的东西

这并不是完整的情况，但希望它能为您提供一些关于该方法如何工作的想法：

FacebookContext.js（或AWSContext.js，或…任何特定服务）

import React，{Component，createContext}来自“React”；
从“Facebook sdk”导入Facebook；
export const FacebookContext=createContext（{}）；
类FacebookProvider扩展组件{
状态={
用户：null，
//您需要向调用组件公开的其他内容，如
//lastLoggedIn:null，
//核实：假，
// ...
};
componentDidMount（）{
Facebook.init({
//这是一些东西
})
}
setUser=user=>{
这是我的国家({
用户
});
}
//希望该类公开的任何其他方法/数据
render（）{
返回(
{this.props.children}
);
}
}
导出默认FacebookProvider；

将提供商添加到你的顶级应用程序文件中，如app.js中所示：

import FacebookProvider from "/path/to/FacebookContext";

// ...

class App extends React.Component {
  render() {
    return (
      <FacebookProvider>
        {yourAppRenderStuff}
      </FacebookProvider>
    );
  }
}

import { FacebookContext } from "/path/to/FacebookContext";

class SomethingComponent extends Component {
  componentDidMount() {
    const { facebookContext } = this.props;

    facebookContext.setUser(`some user`);// available in other components

    console.log(facebookContext.user);// broadcasted to other components
  }

  render() {
    return (
      <></>
    );
  }
}

const Something = () => (
  <FacebookContext.Consumer>
    {facebookContext => (
      <SomethingComponent facebookContext={facebookContext} />
    )}
  </FacebookContext.Consumer>
);

export default Something;

从“/path/to/FacebookContext”导入FacebookProvider；
// ...
类应用程序扩展了React.Component{
render（）{
返回(
{YourAppenderStuff}
);
}
}

将消费者添加到任何调用组件：

import FacebookProvider from "/path/to/FacebookContext";

// ...

class App extends React.Component {
  render() {
    return (
      <FacebookProvider>
        {yourAppRenderStuff}
      </FacebookProvider>
    );
  }
}

import { FacebookContext } from "/path/to/FacebookContext";

class SomethingComponent extends Component {
  componentDidMount() {
    const { facebookContext } = this.props;

    facebookContext.setUser(`some user`);// available in other components

    console.log(facebookContext.user);// broadcasted to other components
  }

  render() {
    return (
      <></>
    );
  }
}

const Something = () => (
  <FacebookContext.Consumer>
    {facebookContext => (
      <SomethingComponent facebookContext={facebookContext} />
    )}
  </FacebookContext.Consumer>
);

export default Something;

从/path/to/FacebookContext导入{FacebookContext}”；
类SomethingComponent扩展组件{
componentDidMount（）{
const{facebookContext}=this.props；
facebookContext.setUser（`some user`）；//在其他组件中可用
console.log（facebookContext.user）；//广播到其他组件
}
render（）{
返回(
);
}
}
const Something=（）=>(
{facebookContext=>(
)}
);
导出默认值；

为什么不使用钩子呢？你说“这些……每次都需要调用一个init（）方法”，然后说“我试图阻止调用多个init（）。你想让init调用一次，还是每次都调用？@RafaelMora当你提到使用钩子时，你能更具体一点吗？具体使用什么函数/方法以及如何使用？@Jayce444很好，澄清一下，每次使用或使用方法时都必须调用initcalled@Invisible-编码器您可以使用

React.useffect（（）=>{initfunc（）；return（）=>{}，[]）

在组件加载时调用任何函数…非常感谢。这肯定是我要考虑的另一个选择，而且实施起来更容易。非常感谢。