HTML 未在 react-tooltip 的工具提示中呈现答案

【问题标题】：HTML not rendered inside tooltip from react-tooltipHTML 未在 react-tooltip 的工具提示中呈现
【发布时间】：2021-04-21 17:43:19
【问题描述】：

我使用了react-tooltip 的工具提示形式，我想在工具提示中放置一些HTML 标签。如何管理这个？我在react-tooltip site 中找不到任何信息。现在我创建工具提示：

const TooltipConst = props => {
if (props.tooltip && props.id) {
    const tooltip = <Tooltip id={props.id + 'Tooltip'}>
        <div> render(){props.tooltip} </div>
    </Tooltip>;
    return (
        <OverlayTrigger
            overlay={tooltip}
            placement="top"
            delayShow={500}
            delayHide={1000}
        >
            {props.children}
        </OverlayTrigger>
    );
}
return <div>{props.children}</div>;

};

当作为工具提示传递一些带有HTML 的字符串时，它们不会呈现。有什么建议吗？我也尝试将其作为对象，例如 <span><p>some text</p> Some text </span>，但它返回的不是文本，而是类似 Object[] 的东西作为工具提示。

【问题讨论】：

标签： html reactjs react-bootstrap

【解决方案1】：

如果你想在 ReactTooltip 中添加 html，比如 html 按钮或其他 html 标签。并希望在点击时显示。

<div id={row.index} className="text-center">
     <a data-tip={'dummystring'} data-event={'click focus'}
      data-for={'tooltip'}>Show tooltip</a>
     <ReactTooltip id={'tooltip'} effect="solid"
           clickable={true} place="right"
           getContent={function() {
           return (
                <div>
                   <span>Some text</span>
                   <Button 
                   onClick={()=>alert('clicked')}>
                   Click Me </Button>
                </div>
          )
    }}/>
</div>

【讨论】：

【解决方案2】：

const tooltip = (<Tooltip id={props.id + 'Tooltip'}>
    <div> render(){props.tooltip} </div>
</Tooltip>);

这是他们的官方文档

如果你想通过 props 渲染 html，你应该使用 dangerouslySetHTML => 参见 React 的文档

【讨论】：

也呈现为render(){props.tooltip} 或dangerouslySetInnerHTML={props.tooltip} 我认为问题在于我将工具提示的内容放到OverlayTrigger 并且该组件没有将内容作为原始字符串进行管理和处理。
函数 createMarkup() { return {__html: props.tooltip}; 怎么样？ } function MyComponent() { return
; }

【解决方案3】：

您可以使用 react-tooltip 库。将 prop html={true} 传递给 <ReactTooltip /> 为 <ReactTooltip html={true} /> for more information refer this link

【讨论】：

【解决方案4】：

这是一个老问题，但我查看了文档，他们现在有一个 data-html 属性来检测你是否想要渲染 html 标记，如下所示：

<ToolTipData data-tip={text} data-html={text.indexOf('</') > -1}>
    {children}
  </ToolTipData>

【讨论】：