Question

我的草稿js编辑器工作正常，它使用convertToRaw(editorState1.getCurrentContent())保存到我的数据库，然后我使用draft-js-export-html和{{1将其转换回HTML }}

到目前为止一直很好......但是现在我想要在我的react组件中显示原始HTML，这就麻烦了。

只需使用stateToHTML(convertFromRaw(dbContent.content.text01))呈现它就会将其作为字符串输出，并以文本形式转换为{props.text01}。

显然我希望它以HTML格式呈现。我该怎么做？

我已经查看了 dangerouslySetInnerHTML ，但我不希望我的草稿js按照我想要的方式运行。

我是以错误的方式去做，还是 dangerouslySetInnerHTML 唯一的方法呢？

Answer 1

如this answer中所述，React默认会转义HTML（这就是为什么它只是呈现为字符串）。但您可以使用dangerouslySetInnerHTML属性强制渲染。您只需要考虑潜在的XSS攻击。

如果已安装草稿，另一种简单呈现内容的方法是使用DraftEditor上的readOnly prop。

Answer 2

你可以使用这个npm模块。链接是link npm install --save html-to-react

实施例

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

＆＃13;

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

＆＃13;

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

2 个答案: