在 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}} />