Empty element is not handled correctly by dangerouslySetInnerHTML

[yapcheahshen]

React version 0.8.0

"<tag></tag>normal text <tag/> normal text <tag>red</tag> normal text"

become

"<tag></tag>normal text <tag> normal text <tag>red</tag> normal text</tag>"

in DOM.
"normal text" should not be red in the following example.

  var NullTag = React.createClass({
    render: function() {
      html="<tag></tag>normal text <tag/> normal text <tag>red</tag> normal text";
      return  React.DOM.div( {dangerouslySetInnerHTML:{__html: html}} )
    }
  });

[vjeux]

When using dangerouslySetInnerHTML, you are using the HTML5 parser which is not an XML parser. It has a lot of weird rules in order to parse any HTML you throw at it in backwards compatible ways.

JSX is a proper XML parser though and should handle your code properly.

[yapcheahshen]

 x<br/>y 

should convert to

x<br></br>y  

instead of

 x<br>y</br>

I have many custom tag which is not component but only text style,
I have to use dangerouslySetInnerHTML, otherwise need to create many classes to handle them.

[sophiebits]

When you use dangerouslySetInnerHTML, React simply passes the HTML to the browser untouched and you don't get any benefit from using React. Why do you need to use dangerouslySetInnerHTML here?

[yapcheahshen]

because I am rendering XML/TEI document , most tag only need styling or simply hidden.
and I don't want to create many small classes for them as the tag-set is huge and might have custom element.
for example,

  <pb id="1"/>

is TEI pagebreak element which will be output directly to browser,

and with a style it will be render nicely.

pb:before { content: "---"  attr(n) "---"; color:brown } 

[yapcheahshen]

this issue is nothing to do with React.

[plievone]

@yapcheahshen Yes, run this in your console document.body.innerHTML = "<tag></tag>normal text <tag/> normal text <tag>red</tag> normal text" and see what kind of elements get created. I suggest using spans with classes or use JSX?

[yapcheahshen]

@plievone thanks, I use JSX when ever possible, I sure can use XSLT to convert XML document to HTML, but it is cleaner to keep XML as-it-is in DOM tree.

  "1<br/>2" become "1<br>2" 

and

 "1<p/>2" become "1<p>2</p>"

it should be

"1<p></p>2"  

to conform XML standard.