跨多個 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;