reactjs - 在純 Typescript 類別中使用 useContext

我有一個純 TypeScript 類，它作為一個工具類執行同質活動。我已經創建了一個可以在任何地方使用的上下文，我想知道我們是否可以在純 TypeScript 類中使用這個上下文及其值。

這個類看起來是這樣的：

export class UtilityClass {
    public async method1() {
        ...
    }
    public async method2() {
        ...
    }
}

我想像這樣使用這個上下文：

const { total, cartItems } = useContext(CartContext);

我已經嘗試在類別中這樣創建一個靜態上下文類型：

export class UtilityClass {
    static contextType = CartContext
    public async method1() {
        const { total, cartItems } = useContext(CartContext);
        ...
    }
    public async method2() {
        ...
    }
}

但是這會拋出以下錯誤：

any
Property 'context' does not exist on type 'UtilityClass'.

答案＃1

Context 與 React 組件樹緊密相連。當一個組件嘗試訪問 context（無論是在函數組件中使用 useContext，還是類組件中的各種方法），React 都會向上查找組件樹以找到最近的 context 提供者。因此，你的組件在樹中相對於任何提供者的位置對於決定你獲取的值至關重要。

因此，嘗試在組件之外訪問上下文是毫無意義的。如果你不在組件中，那麼就沒有位於你之上的組件層級可以訪問。根據你想要做的事情，有幾種可能性：

如果你想要共享的值是一個與組件樹無關的全局值，你可以完全將它從組件中移除。這個值可以從一個文件中導出，並在需要的地方導入。如果這個值從不變化，這樣做很容易；但如果它會變化，組件將不會自動重新渲染。因此，你可能需要設置某種方式來通知組件值的變化，屆時組件會設置狀態並重新渲染自己。
另一個選擇是你可以編寫你的實用函數，將你需要的值作為參數傳入。使用該函數的組件將負責監聽上下文，然後在調用實用函數時將這些值傳入。

const SomeComponent = () => {
  const { total, cartItems } = useContext(CartContext);
  useEffect(() => {
    new UtilityClass().method1(total, cartItems);
  }, []);
    ...
}

export class UtilityClass {
    public async method1(total, cartItems) {
        ...
    }

答案＃2

不可能。你可以在繼承自 React.Component 的類別中以及 Context 提供者的子組件中訪問上下文。