<div data-reactroot> <!-- react-empty: 3 --> <!-- react-empty: 26 --> </div> What is this node ? Why can it render to a React Component ? How to do like this?
Add a comment |
3 Answers
This is actually part of React's internal support for things like null:
// A perfectly valid component () => null // Also a perfectly valid component const MyComponent = React.createClass({ render() { if (this.props.hidden) return null; return <p>My component implementation</p>; } }); 
1 Comment
Leen
Wow! thank! If I ajax to get a server-render Component string like '<div data-react-class="Show" data-react-props="{}"></div>', I want to mount it in this node. How to do it.
Note that with React >= 16, you won't see <!-- react-empty: X --> anymore
Comments
Look at this part of React code which is create this:
var nodeValue = ' react-empty: ' + this._domID + ' '; if (transaction.useCreateElement) { var ownerDocument = hostContainerInfo._ownerDocument; var node = ownerDocument.createComment(nodeValue); ReactDOMComponentTree.precacheNode(this, node); return DOMLazyTree(node); } else { if (transaction.renderToStaticMarkup) { // Normally we'd insert a comment node, but since this is a situation // where React won't take over (static pages), we can simply return // nothing. return ''; } return '<!--' + nodeValue + '-->'; } }, So basically if your component return null, it will create a comment which showing this element is empty, but React take care of that for you by putting a comment there like <!-- react-empty: 3 --> all JavaScript frameworks try to get use of comment in the DOM, to show they handle the code, similar one is ng-if in angular for example...
1 Comment
Hoshi
I wish the English was more clear - I can almost understand this answer.