У меня много экземпляров определенного компонента, назовем его <Item>.При наведении курсора на любой <Item> в позиции элемента должна появиться (довольно сложная и динамичная) подсказка.
Поскольку я использую semantic-ui-реакции, мой инструмент выбора - использовать Popup для отображения всплывающих подсказок.Один из способов использования всплывающих окон - дать им компонент триггера (который будет моим <Item>) и компонент контента, и он позаботится об автоматическом отображении в определенной позиции вокруг компонента триггера.Но тогда у меня есть один Popup экземпляр для каждого из моих элементов, что значительно увеличивает время отклика моего приложения, поскольку все Popup должны быть созданы, даже если они мне сейчас не нужны.
Другойспособ использования Popup - дать ему ссылку через его свойство context, и он откроется на этом узле DOM.Поэтому я хотел бы использовать этот механизм, чтобы иметь только один Popup, который будет получать динамические обновления своего свойства context всякий раз, когда я наводю курсор мыши на <Item>.
. Для этого мне нужнопередать текущий <Item> ref во всплывающее окно.Поскольку у меня есть глубоко вложенное приложение, я решил использовать https://github.com/diegohaz/constate для общего доступа к состоянию.
К сожалению, публикация ссылки не работает.Всякий раз, когда я пытаюсь прочитать его из общего контекста, он становится пустым.
Пожалуйста, взгляните на простой пример здесь: https://codesandbox.io/s/pplw689627
Хотя в отладчике я вижу, что tooltipTargetзаписано в onMouseEnter, когда оно читается в компоненте <Tooltip>, оно всегда равно нулю.
Есть идеи, что я делаю неправильно?
Я открыт для разных предложений, но я бы предпочел использовать всплывающее окно Semantic, если возможно, чтобы сохранить конгруэнтный визуальный стиль.
ОБНОВЛЕНИЕ:
Ответ Тома Финни работает в песочнице выше, к сожалению, я используюМашинопись в моей реальной среде, и там она не работает сразу.Я получил рабочее решение в этой песочнице: https://codesandbox.io/s/7143r32klj
Основная проблема заключается в том, что свойство current RefObject<T> доступно только для чтения.Это мешает вам написать такой контекст:
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