如何在React＆Typescript中全局存儲引用

Question

我有一個特定組件的很多實例，我們稱之為<Item> 。 將鼠標懸停在任何<Item> ，（非常復雜且動態）工具提示應出現在該項目的位置。

當我使用語義UI反應時，我選擇的工具是使用Popup顯示工具提示。 一種使用彈出窗口的方法是為它們提供一個觸發器組件（這將是我的<Item> ）和一個內容組件，它將負責自動顯示在觸發器組件周圍的某個位置。 但是然后我為每個項目都有一個Popup實例，這極大地增加了我的應用程序的響應時間，因為所有的Popup都必須創建，即使我當前不需要它們也是如此。

使用Popup另一種方法是通過其context屬性為其提供引用，它將在該DOM節點處打開。 因此，我想使用這種機制來創建一個Popup ，當我將鼠標懸停在<Item>時，它將對其context屬性進行動態更新。

為此，我需要將當前的<Item>引用傳遞給彈出窗口。 由於我有一個深度嵌套的應用程序，因此我選擇使用https://github.com/diegohaz/constate來全局共享狀態。

不幸的是，共享裁判似乎無效。 每當我嘗試從共享上下文中讀取它時，它為null。

請在這里看一個簡單的例子： https : //codesandbox.io/s/pplw689627

盡管我可以在調試器中看到在tooltipTarget中寫入了onMouseEnter ，但是在<Tooltip>組件中讀取它時，它始終為null。

有什么想法我做錯了嗎？

我樂於接受不同的建議，但我希望盡可能使用Semantic的Popup來保持一致的視覺風格。

---

更新：

湯姆·芬尼斯（Tom Finneys）的答案在上面的沙箱中有效，很遺憾，我在實際環境中使用Typescript，但現在無法正常工作。 我在此沙箱中找到了一個可行的解決方案： https : //codesandbox.io/s/7143r32klj

主要問題是RefObject<T>的current屬性為只讀。 這樣可以防止您編寫如下上下文：

export function useTooltip() {
  const [tooltipRecipe, setTooltipRecipe] = React.useState<string | undefined>(
    undefined
  );
  let tooltipTarget = React.useRef<HTMLElement>(null);
  const setTooltipTarget = (target: HTMLElement | null) => {
    dummy.current = target;
  };
  return { tooltipRecipe, tooltipTarget, setTooltipRecipe, setTooltipTarget };
}

setTooltipTarget無法編譯。

我現在可以使它工作的唯一方法是將RefObject<T>轉換為current不是只讀的本地類型。 這是一個相當不錯的技巧，但確實可行。 請參閱沙箱中的解決方案。

---

實際上，有關此的討論正在進行中： https : //github.com/DefinitelyTyped/DefinitelyTyped/issues/31065

Answer 1

您的問題源於試圖對組件主體內部的tooltipTarget ref進行突變。 您應該在上下文中聲明另一個setter函數，您可以調用該函數來更改ref的當前值。

我在沙盒中戳了一下： https : //codesandbox.io/s/p6pknz837?fontsize=14