react-emptyCo jest reaguje puste: *?
<div data-reactroot>
<!-- react-empty: 3 -->
<!-- react-empty: 26 -->
</div>
Co to jest węzeł? Dlaczego może renderować do komponentu React? Jak to zrobić?
react-emptyCo jest reaguje puste: *?
<div data-reactroot>
<!-- react-empty: 3 -->
<!-- react-empty: 26 -->
</div>
Co to jest węzeł? Dlaczego może renderować do komponentu React? Jak to zrobić?
To jest rzeczywiście częścią 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>;
}
});
Look w tej części kodu React
który jest stworzenie w ten sposób:
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 + '-->';
}
},
Więc w zasadzie, jeśli składnik zerowy powrotny, stworzy komentarz który pokazuje ten element jest pusty, ale React zadbaj o to, bo kupujesz wstawiając komentarz <!-- react-empty: 3 -->
wszystkie frameworki JavaScript próbują użyć komentarza w DOM, aby pokazać, że obsługują kod, podobny jest ng-if w kanoncie f lub przykład ...
Należy zauważyć, że z React> = 16, nie będzie widać <!-- react-empty: X -->
już
Wow! podziękować! Jeśli ajax, aby uzyskać ciąg znaków komponentu renderującego serwer, taki jak "
", chcę go zamontować w tym węźle. Jak to zrobić. – Leen