Was ist reaktiv-leer: *?

Question

react-empty

<div data-reactroot> 
<!-- react-empty: 3 --> 
<!-- react-empty: 26 --> 
</div> 

Was ist dieser Knoten? Warum kann es für eine React-Komponente gerendert werden? Wie geht das?

Answer 1

Dies ist eigentlich ein Teil von 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>; 
    } 
}); 

Answer 2

Blick auf diesem Teil des React-Code, der dies schaffen:

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 + '-->'; 
    } 
    }, 

Also im Grunde, wenn Ihre Komponente return null, wird es einen Kommentar schreiben was zeigt dieses Element ist leer, aber Reagieren Sie darauf, dass für Sie kaufen einen Kommentar dort setzen <!-- react-empty: 3 --> alle JavaScript-Frameworks versuchen, Verwendung von Kommentaren im DOM, um zu zeigen, sie behandeln den Code, ähnlich ist ng-if in angular f oder Beispiel ...

Answer 3

Beachten Sie, dass mit React> = 16, werden Sie nicht sehen <!-- react-empty: X --> mehr