Ist es möglich, in der React-Render-Funktion leer zurückzugeben?

135

Ich habe eine Benachrichtigungskomponente und eine Timeout-Einstellung dafür. Nach einer Auszeit rufe ich an this.setState({isTimeout:true}).

Was ich tun möchte, ist, wenn bereits eine Zeitüberschreitung vorliegt, ich möchte einfach nichts rendern:

  render() {
    let finalClasses = "" + (this.state.classes || "");
    if (isTimeout){
      return (); // here has some syntax error
    }
    return (<div>{this.props.children}</div>);
  }

Das Problem ist: return (); // hier hat ein Syntaxfehler

Xin
quelle

Antworten:

245

Ja, Sie können, aber anstatt leer, kehren nullSie einfach zurück, wenn Sie rendernichts 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=falseeinen beliebigen dieser Werte zurückgeben können false, null, undefined, true. Gemäß DOC :

booleans (true/false), null, and undefinedsind gültig Kinder , werden sie Mittel , die sie einfach machen nicht ignoriert werden.

Alle diese JSXAusdrü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' />

Mayank Shukla
quelle
7
Warum kehren Sie zurück (null) und nicht einfach null?
wederer
6
@ Federer gibt es keinen Unterschied zwischen return nullund return (null)sie sind gleich :)
Mayank Shukla
Übrigens können Sie Ihre Funktion nicht einfach abbrechen (was der Rückgabe von undefiniert entspricht). Wenn Sie keine haben, returngibt React einen Fehler aus. Das return nullist also erforderlich.
John Henckel
19

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 :

In seltenen Fällen möchten Sie möglicherweise, dass sich eine Komponente versteckt, obwohl sie von einer anderen Komponente gerendert wurde. Geben Sie dazu null anstelle der Renderausgabe zurück.

Wenn Sie beispielsweise versuchen, zurückzukehren undefined, wird die folgende Fehlermeldung angezeigt:

Vom Rendern wurde nichts zurückgegeben. Dies bedeutet normalerweise, dass eine return-Anweisung fehlt. Oder, um nichts zu rendern, geben Sie null zurück.

Wie schon in anderen Antworten darauf hingewiesen, null, true, falseund undefinedgü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ück null.

jhujhul
quelle
6

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 :

false, null, undefined, Und truegelten Kinder. Sie rendern einfach nicht.

Du könntest schreiben

return null; or
return false; or
return true; or
return undefined; 

Dies return nullist jedoch am meisten bevorzugt, da dies bedeutet, dass nichts zurückgegeben wird

Shubham Khatri
quelle
1
return undefined ist falsch. es würde einen Fehler zurückgeben. Stattdessen ist die Rückgabe von <div> {undefined} </ div> der richtige Weg.
Jay Dhawan
3

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:

render = () => null

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 renderFunktion 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-routerDokumentation 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.

Chris Kobrzak
quelle
1
Der Code wurde bereits fertiggestellt, aber ich mag diesen Stil, sieht am einfachsten aus.
Xin
0

Wir können so zurückkehren,

return <React.Fragment />;
siluveru kiran kumar
quelle
2
ist das besser oder schlechter als zurückzukehren null?
Strider
@bitstrider, das Fragment anstelle von Null verwendet, löst nur einen Speicherverlust aus.
Koo
1
Ich bin mir nicht sicher, warum diese Antwort abgelehnt wurde. Sie zeigt ausdrücklich die Absicht des Entwicklers
ktingle
0

Wenn Sie in der Funktion render () einen falschen Wert zurückgeben, wird nichts gerendert. Also kannst du es einfach tun

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }
Schrödingers Code
quelle