Draft.js 和 stateToHTML，如何在 React 组件中呈现输出 html？
Draft.js and stateToHTML, how to render output html in react component?
我的 Draft js 编辑器工作正常，它使用 convertToRaw(editorState1.getCurrentContent()) 保存到我的数据库，我正在取回它并使用 draft-js-export 将其转换为 HTML -html 和 stateToHTML(convertFromRaw(dbContent.content.text01)).
到目前为止一切顺利...但现在我有原始 HTML 想在我的 React 组件中显示，问题来了。
只需使用 {props.text01} 将其渲染输出为字符串并转换为 <p>adfasfadfs</p> 作为文本。
显然我希望它呈现为 HTML。我该怎么做？
我看过 dangerouslySetInnerHTML 但我宁愿没有另一个插件只是为了让我的 Draft js 以我想要的方式工作。
我是不是用错了方法，还是 dangerouslySetInnerHTML 是唯一的方法？
你可以使用这个 npm 模块。
link 是 link
npm install --save html-to-react
例子
简单
以下示例解析每个节点及其属性和 returns 一棵 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
如 this answer 中所述，默认情况下 React 将转义 HTML（这就是它仅呈现为字符串的原因）。但是您可以使用 dangerouslySetInnerHTML 属性 强制渲染。您只需要考虑潜在的 XSS 攻击。
如果已经安装了 Draft，另一种简单呈现内容的方法是使用 DraftEditor 上的 readOnly prop。
我的 Draft js 编辑器工作正常，它使用 convertToRaw(editorState1.getCurrentContent()) 保存到我的数据库，我正在取回它并使用 draft-js-export 将其转换为 HTML -html 和 stateToHTML(convertFromRaw(dbContent.content.text01)).
到目前为止一切顺利...但现在我有原始 HTML 想在我的 React 组件中显示，问题来了。
只需使用 {props.text01} 将其渲染输出为字符串并转换为 <p>adfasfadfs</p> 作为文本。
显然我希望它呈现为 HTML。我该怎么做？
我看过 dangerouslySetInnerHTML 但我宁愿没有另一个插件只是为了让我的 Draft js 以我想要的方式工作。
我是不是用错了方法，还是 dangerouslySetInnerHTML 是唯一的方法？
你可以使用这个 npm 模块。 link 是 link npm install --save html-to-react
例子
简单 以下示例解析每个节点及其属性和 returns 一棵 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
如 this answer 中所述，默认情况下 React 将转义 HTML（这就是它仅呈现为字符串的原因）。但是您可以使用 dangerouslySetInnerHTML 属性 强制渲染。您只需要考虑潜在的 XSS 攻击。
如果已经安装了 Draft，另一种简单呈现内容的方法是使用 DraftEditor 上的 readOnly prop。