首页 文章

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

提问于
浏览 次
1

我让我的Draft js编辑器工作正常，它保存到我的数据库，使用 convertToRaw(editorState1.getCurrentContent()) ，然后我将它恢复并使用draft-js-export-html和 stateToHTML(convertFromRaw(dbContent.content.text01)) 将其转换为HTML .

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

只需使用 {props.text01} 渲染它就会将其作为字符串输出并变为 <p>adfasfadfs</p> 作为文本 .

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

我已经看过危险的SetInnerHTML，但我宁愿不再使用另一个插件来让我的草稿js以我想要的方式工作 .

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

javascript html reactjs draftjs draft-js-plugins

2 回答

  • 3

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

    如果已经安装了Draft，另一种简单渲染内容的方法是使用DraftEditor上的readOnly prop .

    回复于
  • 2

    你可以使用这个npm模块 . 链接是link 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
    回复于

相关问题