在 React，富文本编辑器上将字符串转换为 HTML

Question

我正在使用 React-Quill 将富文本编辑器添加到我的应用程序中。

在我的数据库中存储下一个字符串：

const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';

现在我想在一个 REACT 组件中“渲染”文本 const，但是使用 HTML 给它的“样式”。

你好世界

下一行

我该怎么做？ 或其他富文本编辑器来实现？

Answer 1

react-quill quill 支持开箱即用的 HTML 字符串，因此除了使用从数据库收到的字符串设置组件的value属性外，无需做任何事情。

<ReactQuill value={text} ... />

Answer 2

是的， react-quill是使用 React 的方式。 我还有一个小演示来演示它是如何工作的（我们可能需要放置一些 css 文件以使其看起来不错）： https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App .js

Answer 3

您可以危险地使用SetInnerHTML

来源： https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

const text = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';

<div dangerouslySetInnerHTML={{__html:text}} />