javascript - Draft.js and stateToHTML, how to render output html in react component? - Stack Overflow

admin管理员组

文章数量:1435090

I've got my Draft js editor working fine, it saves to my database, using convertToRaw(editorState1.getCurrentContent()), and I am getting it back and converting it to HTML using draft-js-export-html and stateToHTML(convertFromRaw(dbContent.content.text01)).

So far so good... but now I have raw HTML that I want to display in my react ponent, and here es the trouble.

Just rendering it with {props.text01} outputs it as a string and turns into <p>adfasfadfs</p> as text.

Obviously I want it to render as HTML. How do I do that?

I have looked at dangerouslySetInnerHTML but I would prefer not having ANOTHER plugin just to get my Draft js working the way I want it to.

Am I going at it the wrong way, or is dangerouslySetInnerHTML the only way to do it?

I've got my Draft js editor working fine, it saves to my database, using convertToRaw(editorState1.getCurrentContent()), and I am getting it back and converting it to HTML using draft-js-export-html and stateToHTML(convertFromRaw(dbContent.content.text01)).

So far so good... but now I have raw HTML that I want to display in my react ponent, and here es the trouble.

Just rendering it with {props.text01} outputs it as a string and turns into <p>adfasfadfs</p> as text.

Obviously I want it to render as HTML. How do I do that?

I have looked at dangerouslySetInnerHTML but I would prefer not having ANOTHER plugin just to get my Draft js working the way I want it to.

Am I going at it the wrong way, or is dangerouslySetInnerHTML the only way to do it?

• javascript
• html
• reactjs
• draftjs
• draft-js-plugins

Share Improve this question Follow asked May 11, 2017 at 11:41 WinterWinter 2,51722 gold badges2323 silver badges3030 bronze badges 10

• can you provide fiddle for this? – MehulJoshi Commented May 11, 2017 at 11:42
• Not really, draft.js and draft-js-export-html would make that pretty plicated. – Winter Commented May 11, 2017 at 11:46
• added answer, it will help you. I guess. – MehulJoshi Commented May 11, 2017 at 11:47
• 1 dangerouslySetInnerHTML should work just fine (it's not a plugin, it's provided by React). But why don't you render it using Draft with readOnly set to true? I guess my question is what reasons you have for using stateToHTML. – tobiasandersen Commented May 11, 2017 at 12:04
• @tobiasandersen the thing is that I will sometimes have to do some manipulation on the content, which is kind of plicated. I have not implemented it yet, but right now it seems easier to me to modify the html instead of the json object. – Winter Commented May 11, 2017 at 12:07

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 3

As described in this answer, React will escape HTML by default (that's why it's just rendered as a string). But you can force the rendering by using the dangerouslySetInnerHTML property. You'd just have to take potential XSS attacks into consideration.

If Draft is already installed, another way to just simply render the content is to use the readOnly prop on the DraftEditor.

you can use this npm module. link is link npm install --save html-to-react

Examples

Simple The following example parses each node and its attributes and returns a tree of React elements.

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

本文标签： javascriptDraftjs and stateToHTMLhow to render output html in react componentStack Overflow