Ja, Sie können, aber anstatt leer, kehren null
Sie einfach zurück, wenn Sie render
nichts von der Komponente möchten , wie folgt:
return (null);
Ein weiterer wichtiger Punkt ist, dass Sie in JSX, wenn Sie das Element bedingt rendern, im Falle von condition=false
einen beliebigen dieser Werte zurückgeben können false, null, undefined, true
. Gemäß DOC :
booleans (true/false), null, and undefined
sind gültig Kinder , werden sie Mittel , die sie einfach machen nicht ignoriert werden.
Alle diese JSX
Ausdrücke werden auf dasselbe übertragen:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
Beispiel:
Es werden nur ungerade Werte gerendert, da wir für gerade Werte zurückgeben null
.
const App = ({ number }) => {
if(number%2) {
return (
<div>
Number: {number}
</div>
)
}
return (null); //===> notice here, returning null for even values
}
const data = [1,2,3,4,5,6];
ReactDOM.render(
<div>
{data.map(el => <App key={el} number={el} />)}
</div>,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
return null
undreturn (null)
sie sind gleich :)return
gibt React einen Fehler aus. Dasreturn null
ist also erforderlich.Einige Antworten sind leicht falsch und verweisen auf den falschen Teil der Dokumente:
Wenn Sie möchten, dass eine Komponente nichts rendert, geben Sie einfach Folgendes zurück
null
, wie im Dokument beschrieben :Wenn Sie beispielsweise versuchen, zurückzukehren
undefined
, wird die folgende Fehlermeldung angezeigt:Wie schon in anderen Antworten darauf hingewiesen,
null
,true
,false
undundefined
gültige Kinder sind , die für die bedingte Rendering nützlich ist innerhalb Ihrer jsx, aber es mögen Sie Ihre Komponente zu verstecken / macht nichts, nur zurücknull
.quelle
Ja, Sie können einen leeren Wert von einer React-Rendermethode zurückgeben.
Sie können Folgendes zurückgeben:
false, null, undefined, or true
Laut den Dokumenten :
Du könntest schreiben
Dies
return null
ist jedoch am meisten bevorzugt, da dies bedeutet, dass nichts zurückgegeben wirdquelle
Etwas abseits des Themas, aber wenn Sie jemals eine klassenbasierte Komponente benötigt haben, die niemals etwas rendert, und Sie gerne eine noch zu standardisierende ES-Syntax verwenden, sollten Sie Folgendes tun:
Dies ist im Grunde eine Pfeilmethode, für die derzeit das Babel-Plugin für Transformationsklasseneigenschaften erforderlich ist . Mit React können Sie keine Komponente ohne die
render
Funktion definieren, und dies ist die prägnanteste Form, die diese Anforderung erfüllt, die ich mir vorstellen kann.Ich verwende diesen Trick derzeit in einer Variante von ScrollToTop, die aus der
react-router
Dokumentation entlehnt wurde . In meinem Fall gibt es nur eine einzige Instanz der Komponente und sie rendert nichts, daher passt eine Kurzform von "render null" gut hinein.quelle
Wir können so zurückkehren,
quelle
null
?Wenn Sie in der Funktion render () einen falschen Wert zurückgeben, wird nichts gerendert. Also kannst du es einfach tun
quelle