DangerouslySetInnerHtml not working properly on simple example.

[sergiotapia]

Using React 15.3.0 latest.

Here's what I tried and how it goes wrong.

This works:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

This doesn't:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

---

The description property is just a normal string of HTML content. However it's rendered as a string, not as HTML for some reason.

Any suggestions?

[jimfb]

That would seem unlikely. Either way, React just gets a string in, so React can't actually tell the difference between those two examples. If you can demonstrate in a jsfiddle, we can investigate further.

[sergiotapia]

I had to unescape the HTML for it to work.

'<h1>Hi there!</h1>'

Should react automatically unescape html since we're already calling DangerouslySetInnerHtml?

[brigand]

@sergiotapia that escaped html is perfectly valid html. Unescaping it could allow for XSS attacks and incorrect rendering.

[sergiotapia]

I thought that was the point though, dangerouslySetInnerHtml. Right now I have to create a div set it's html, then extract the html again. Not a good solution.

htmlDecode(content) {
  let e = document.createElement('div');
  e.innerHTML = content;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

There should be a method that tells React to just do it.

[syranide]

@sergiotapia
'<h1>Hi there!</h1>' renders to the visible text <h1>Hi there!</h1>.
'<h1>Hi there!</h1>' renders to an H1 with the text Hi there!, which is what you're expecting.

Both are valid HTML, but if it's the second result you expect then you shouldn't be storing it escaped like in the first example, it is wrong. React is working correctly, it's your stored representation that has been unnecessarily/incorrectly escaped.

[Slowly]

I thought that was the point though, dangerouslySetInnerHtml. Right now I have to create a div set it's html, then extract the html again. Not a good solution.

htmlDecode(content) {
  let e = document.createElement('div');
  e.innerHTML = content;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

There should be a method that tells React to just do it.

...But they will never allow that, so we have to kludge for very rare instances, such as rendering fetch() response object output as HTML into a Context API Consumer. The ES6 fetch() API Response Object only outputs two forms: JSON, and text. The ONLY solution - yours - will fire a re-render of the Consumer component, rendering the text as valid HTML. This solution IS viable and is secure in any situation where innerHTML() is NOT processing user input - it is processing data read from a file, or data read from a web service.

So, when you get a chance, could you post your complete solution here.

Thank you.

[xgqfrms]

bug

https://taro-docs.jd.com/taro/next/docs/next/html.html