如何在没有 html 标记的情况下渲染 React Quill 的内容?

2023-12-10

我设法让我的 Quill 工作,但现在我想显示编辑器中的内容,而不使用 html 标记。我尝试使用反应渲染htmlnpm 包,以前工作正常,但现在不再维护并给我一个错误

Could not find a declaration file for module 'react-render-html'. /path/to/module
implicitly has an 'any' type.
  Try `npm install @types/react-render-html` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-render-html';

它还以 html 标记显示。所以我尝试使用反应 html 解析器 , htmr , html 反应npm packages ,它非常适合单个元素,但不适用于多个元素。 所以我尝试 console.log 来查看我从后端收到的内容,这给了我这个

<p>&lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt;

现在我想在没有 html 标记的情况下渲染它,所以我再次执行 console.log 以查看它是否通过执行正确转换

  //import renderHtml from 'htmr';
  //import renderHtml from 'html-to-react';

    import renderHtml from 'react-html-parser';
 
  console.log(renderHtml(${blog.excerpt}))

最终它给了我这个

<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p> 
<h2>Hello</h2><p>how are you ? </p>

我也尝试过dangerouslysetinnerhtml但它不再起作用了


查看您的服务器响应,HTML 标记已被转义。在传递给 HTML 解析器之前,您需要先对其进行转义。

您可以使用html 实体解码服务器响应。最简单的方法就是全部替换&lt; and &gt;人物。

const decodedHtml = htmlEntities.decode(html)
// or
const decodedHtml = html.replace(/&lt;/g, '<').replace(/&gt;/g, '>')

return htmr(decodedHtml)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在没有 html 标记的情况下渲染 React Quill 的内容? 的相关文章

随机推荐