1

上下文：我有省略号的表格单元格，所以我想在标题上有一个工具提示。目前我正在使用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>
4

2 回答 2

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>
  );
}

现场演示

编辑 64447188/unable-to-see-the-tooltip-while-using-highlighter

于 2020-10-20T15:48:28.383 回答
1

我浏览了 Tooltip 和 Highlighter 的文档，发现 Tooltip 只需要一个直接子级，而 Highlighter 渲染多个子级。因此，简单的解决方案是用一些 <span> 标签等包装 Highlight 组件。

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

现场演示

于 2020-10-21T06:38:27.377 回答