Draft.js和stateToHTML，如何在react组件中呈现输出html？

Question

我的草稿js编辑器运行良好，它使用convertToRaw(editorState1.getCurrentContent())保存到我的数据库中，现在我将其恢复并使用draft-js-export-html和stateToHTML(convertFromRaw(dbContent.content.text01))转换为HTML stateToHTML(convertFromRaw(dbContent.content.text01)) 。

到目前为止一切顺利……但是现在我有原始HTML想要显示在我的react组件中，麻烦就来了。

只需使用{props.text01}渲染，就可以将其作为字符串输出，并转换为<p>adfasfadfs</p>作为文本。

显然，我希望它呈现为HTML。 我怎么做？

我已经看了危险的SetInnerHTML，但是我不希望仅使用ANOTHER插件来使我的Draft js以我想要的方式工作。

我是用错误的方式进行操作，还是危险地使用SetInnerHTML这样做？

Answer 1

如该答案所述 ，React默认情况下会转义HTML（这就是为什么它只是作为字符串呈现的原因）。 但是，您可以通过使用危险地设置内部HTML属性来强制呈现。 您只需要考虑潜在的XSS攻击。

如果已经安装了Draft，则仅渲染内容的另一种方法是在DraftEditor上使用readOnly道具 。

Answer 2

您可以使用此npm模块。 链接是链接 npm install-保存html-to-react

例子

简单下面的示例解析每个节点及其属性，并返回一个React元素树。

 var ReactDOMServer = require('react-dom/server'); var HtmlToReactParser = require('html-to-react').Parser; var htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>'; var htmlToReactParser = new HtmlToReactParser(); var reactElement = htmlToReactParser.parse(htmlInput); var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement); assert.equal(reactHtml, htmlInput); // true