Question

是否可以在react bootstrap工具提示组件中显示一些自定义HTML标记

<OverlayTrigger
          placement='top'
          trigger={['click', 'hover', 'focus']}
          overlay={
            <Tooltip id='Description__tooltip'>
              {record.desc}
            </Tooltip>
          }
        >
          <i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
        </OverlayTrigger>

工具提示（record.desc）中显示的值包含一些我想添加到此工具提示的html代码。

Answer 1

您可以尝试使用dangerouslySetInnerHTML吗？

<Tooltip id='Description__tooltip'>
  <div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>

Answer 2

您可以尝试 dangerouslySetInnerHTML

const tooltip = (
  <Tooltip id="Description__tooltip">
    <div dangerouslySetInnerHTML={{ __html: record.desc}} />
  </Tooltip>
);

 <OverlayTrigger
     placement='top'
     trigger={['click', 'hover', 'focus']}
     overlay={tooltip}
 >
     <i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
 </OverlayTrigger>

Answer 3

在您的问题中，如果要在子级中插入DOM元素，则必须执行函数以包装DOM元素包含的道具。我们可以使用 dangerouslySetInnerHTML 。下面的示例代码。

<OverlayTrigger
      placement='top'
        trigger={['click', 'hover', 'focus']}
        overlay={
         <Tooltip id='Description__tooltip'>
           <div dangerouslySetInnerHTML={{__html:record.desc}} />
         </Tooltip>
        }
     >
     <i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>

在React Bootstrap工具提示中添加HTML标记

3 个答案: