reactjs - 使用荧光笔时看不到工具提示

Question

上下文：我有省略号的表格单元格，所以我想在标题上有一个工具提示。目前我正在使用Material UITooltip。此外，由于有一个搜索选项，因此我使用荧光笔react-highlight-words来突出显示搜索词。

问题：使用 包装 Highlighter 组件时Tooltip，工具提示没有像通常那样弹出。我改用了react-tooltip并且它有效。

下面是我要渲染的代码片段：-

<TableCell align="center">
<Tooltip title={title}>
  <Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
</Tooltip>

寻求一些帮助如何使用 MUI 工具提示和荧光笔。

这是使用 react-tooltip 时的代码：

<TableCell align="center">
  <span data-tip={title}>
      <Highlighter highlightClassName="YourHighlightClass" searchWords={[searchValue]} autoEscape textToHighlight={title} />
      <ReactTooltip delayShow={500} effect="solid" border={false}/>
  </span>
</TableCell>

标签： reactjsmaterial-uitooltiphighlighter

Answer 1

它不起作用，因为您使用的自定义组件不支持让您将 ref 向下传递给 DOM 元素的 API。<Tooltip/>需要子引用知道 DOM 元素在哪里，这样它才能正确定位自己。

您可以通过使用React.forwardRef()which allow <Tooltip/>to access children ref来修复它

const HighlightedSentence = React.forwardRef((props, ref) => {
  return (
    <span ref={ref} style={{ backgroundColor: "pink" }}>
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["and", "or", "the"]}
        autoEscape={true}
        textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
        {...props}
      />
    </span>
  );
});

function App() {
  return (
    <Tooltip title={"my tooltip"} placement="bottom">
      <HighlightedSentence />
    </Tooltip>
  );
}

现场演示