È possibile restituire vuoto nella funzione di rendering reattivo?

Ho un componente di notifica e ho un'impostazione di timeout per esso. dopo il timeout chiamo this.setState({isTimeout:true}).

Quello che voglio fare è se già timeout, voglio solo rendere nulla:

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

il problema è: return (); // qui ha qualche errore di sintassi

Sì, puoi, ma invece di vuoto, ritorna semplicemente nullse non vuoi rendernulla dal componente, come questo:

return (null);

Un altro punto importante è, all'interno di JSX se si esegue il rendering dell'elemento in modo condizionale, quindi in caso di condition=false, è possibile restituire uno di questi valori false, null, undefined, true. Come da DOC :

booleans (true/false), null, and undefinedsono figli validi , saranno ignorati significa che semplicemente non rendono.

Tutte queste JSXespressioni renderanno alla stessa cosa:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Esempio:

Verranno visualizzati solo i valori dispari, perché per i valori pari stiamo ritornando 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' />

Alcune risposte sono leggermente errate e indicano la parte sbagliata dei documenti:

Se vuoi che un componente non mostri nulla, ritorna null, come da documento :

In rari casi potresti voler nascondere un componente anche se è stato renderizzato da un altro componente. Per fare questo restituisce null invece del suo output di rendering.

Se provi a tornare, undefinedad esempio, otterrai il seguente errore:

Non è stato restituito nulla dal rendering. Questo di solito significa che manca un'istruzione return. Oppure, per non rendere nulla, restituire null.

Come sottolineato da altre risposte, null, true, falsee undefinedsono bambini validi che è utile per il rendering condizionale all'interno vostra JSX, ma si desidera che il componente per nascondere / render nulla, solo ritorno null.

Sì, puoi restituire un valore vuoto da un metodo di rendering React.

È possibile restituire uno dei seguenti: false, null, undefined, or true

Secondo i documenti :

false, null, undefined, E truesono bambini validi. Semplicemente non rendono.

Potresti scrivere

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

Tuttavia return nullè il più preferito in quanto significa che non viene restituito nulla

Leggermente fuori tema, ma se hai mai avuto bisogno di un componente basato su classi che non esegue il rendering di nulla e sei felice di usare una sintassi ES ancora standardizzata, potresti voler andare:

render = () => null

Questo è fondamentalmente un metodo freccia che attualmente richiede il plug -in Babel di trasform-class-properties . React non ti permetterà di definire un componente senza la renderfunzione e questa è la forma più concisa che soddisfa questo requisito a cui posso pensare.

Attualmente sto usando questo trucco in una variante di ScrollToTop presa in prestito dalla react-routerdocumentazione. Nel mio caso, c'è solo una singola istanza del componente e non rende nulla, quindi una breve forma di "render null" si adatta bene lì.

Possiamo tornare così,

return <React.Fragment />;

Restituire il valore di falsy nella funzione render () non renderà nulla. Quindi puoi semplicemente fare

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