时间戳

首页 > 解决方案 > 当我在 Highlighter 标签中使用 dangerouslySetInnerHTML 时，荧光笔不起作用

javascript - 当我在 Highlighter 标签中使用 dangerouslySetInnerHTML 时，荧光笔不起作用

问题描述

当我在 react-highlighter 中使用 dangerouslySetInnerHTML 时，突出显示类将不起作用。

<Highlight search={searchQuery}
className={Styles.body_highlighter}
innerHTML={true}
matchStyle={{ background: '#fff466', padding: '0px' }}>
<div className={Styles.body_highlighter}
dangerouslySetInnerHTML={{ __html: item.body }} />
</Highlight>

显示了表格，但未显示搜索词上的黄色突出显示。图片链接-> https://ibb.co/7C80pTG

但是当我从代码中删除 dangerouslySetInnerHTML 时，表格不会显示。

<Highlight search={searchQuery}
className={Styles.body_highlighter}
innerHTML={true}
matchStyle={{ background: '#fff466', padding: '0px' }}>
{item.body} 
</Highlight>

表格未在搜索词显示上显示黄色突出显示。

图片链接-> https://ibb.co/25W8VmW

标签： javascriptreactjsredux

解决方案

  1. 我认为您错误地将第二张图片上传为第一张。

  2. 如果使用 fetch api 来获取 html 文本，请在 promise 处理程序中使用 items.text()。

    const item = await fetch(url).then( data => data.text() ).then(text => { return text; });

然后用这个。

<div
   className={Styles.body_highlighter}
   dangerouslySetInnerHTML={{ __html: item}}
/>

推荐阅读