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

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

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' />

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.

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

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.

Wir können so zurückkehren,

return <React.Fragment />;

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>;
  }