2

我的 Draft js 编辑器工作正常，它使用 保存到我的数据库中，convertToRaw(editorState1.getCurrentContent())我将其取回并使用 draft-js-export-html 和stateToHTML(convertFromRaw(dbContent.content.text01)).

到目前为止一切都很好......但是现在我有了想要在我的反应组件中显示的原始 HTML，麻烦就来了。

只需将其渲染{props.text01}为字符串并转换<p>adfasfadfs</p>为文本即可。

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

我已经查看了dangerouslySetInnerHTML但我宁愿没有另一个插件只是为了让我的 Draft js 以我想要的方式工作。

我是不是走错了路，还是危险的 SetInnerHTML 是唯一的方法？

4

2 回答 2

3

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

如果已经安装了 Draft，另一种简单地呈现内容的方法是使用 DraftEditor 上的readOnly属性。

于 2017-05-11T12:22:30.770 回答
2

你可以使用这个 npm 模块。链接是链接 npm install --save 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

于 2017-05-11T11:46:50.877 回答