如何在没有 html 标记的情况下呈现 React Quill 的内容？

Question

我设法使我的 Quill 正常工作，但现在我想显示编辑器中没有 html 标记的内容。我尝试使用 react-render-html npm 包，它之前工作正常但现在它不再维护并给我一个错误

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 标记。所以我尝试使用 react-html-parser , htmr , html-to-react 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 但它不再工作了

Answer 1

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

您可以使用 html-entities 解码服务器响应。最简单的方法是替换所有 < 和 > 字符。

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

return htmr(decodedHtml)

Answer 2

要解决这个问题只需粘贴一行 <div dangerouslySetInnerHTML={{ __html:value }} />

此处的值是您从 react-quill 获得的 HTML。

如何在没有 html 标记的情况下呈现 React Quill 的内容？

How to render the content of React Quill without the html markup?

html

javascript

node.js

reactjs

react-quill