跨多个 React 组件共享一个 JavaScript 类

Question

我有一个 Javascript 类，它充当与 API 对话的数据控制器。

我需要从多个反应组件调用该类的方法。

目前我正在 redux 存储中存储类的一个实例，但是我知道这是一种糟糕的设计方法。

如何跨多个组件共享单个实例？

Answer 1

有几种方法可以处理这个问题。 就我个人而言，我使用提供程序文件导出一个实例，我可以在需要时导入该实例。

假设我需要在我的应用程序中使用相同的类实例Foo 。 我会将Foo导入到一个提供程序文件中，该文件创建并导出它的一个实例。 然后我会从我需要的那个提供者导入实例：

文件， Foo.js ：

class Foo {};

export default Foo;

文件， FooProvider.js

import Foo from './Foo';

export let foo = new Foo();

组件文件：

import foo from './FooProvider';
import React, { Component } from 'react';

Class MyComponent extends Component {
    someMethod () {
        //use foo
    }
}

export default MyComponent;