Est-il possible de retourner vide dans la fonction react render?

J'ai un composant de notification, et j'ai un paramètre de délai d'attente pour cela. après le délai, j'appelle this.setState({isTimeout:true}).

Ce que je veux faire, c'est si déjà timeout, je ne veux rien rendre:

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

le problème est: return (); // a ici une erreur de syntaxe

Oui, vous pouvez, mais au lieu de blanc, retournez simplement nullsi vous ne voulez renderrien du composant, comme ceci:

return (null);

Un autre point important est que, dans JSX, si vous effectuez un rendu conditionnel d'un élément condition=false, vous pouvez renvoyer n'importe laquelle de ces valeurs en cas de false, null, undefined, true. Selon DOC :

booleans (true/false), null, and undefinedsont des enfants valides , ils seront ignorés signifie qu'ils ne sont tout simplement pas rendus.

Toutes ces JSXexpressions donneront la même chose:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Exemple:

Seules les valeurs impaires seront rendues, car pour les valeurs paires, nous retournons 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' />

Certaines réponses sont légèrement incorrectes et pointent vers la mauvaise partie de la documentation:

Si vous voulez qu'un composant ne rende rien, retournez simplement null, comme indiqué dans la documentation :

Dans de rares cas, vous souhaiterez peut-être qu'un composant se cache même s'il a été rendu par un autre composant. Pour ce faire, retournez null au lieu de sa sortie de rendu.

Si vous essayez de revenir undefined par exemple, vous obtiendrez l'erreur suivante:

Rien n'a été renvoyé du rendu. Cela signifie généralement qu'une instruction return est manquante. Ou, pour ne rien rendre, retournez null.

Comme l' a souligné d' autres réponses, null, true, falseet undefinedsont des enfants valides qui est utile pour le rendu conditionnel à l' intérieur de votre jsx, mais vous voulez que votre composant à cacher / rien rendre, juste revenir null.

Oui, vous pouvez renvoyer une valeur vide à partir d'une méthode de rendu React.

Vous pouvez retourner l'un des éléments suivants: false, null, undefined, or true

Selon la documentation :

false, null, undefinedEt truesont des enfants valides. Ils ne sont tout simplement pas rendus.

Tu pourrais écrire

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

Cependant, return nullc'est le plus préféré car cela signifie que rien n'est retourné

Légèrement hors sujet, mais si vous avez déjà eu besoin d'un composant basé sur des classes qui ne rend jamais rien et que vous êtes heureux d'utiliser une syntaxe ES encore à standardiser, vous voudrez peut-être aller:

render = () => null

Il s'agit essentiellement d'une méthode de flèche qui nécessite actuellement le plugin Babel transform-class-properties . React ne vous permettra pas de définir un composant sans la renderfonction et c'est la forme la plus concise satisfaisant cette exigence à laquelle je puisse penser.

J'utilise actuellement cette astuce dans une variante de ScrollToTop empruntée à la react-routerdocumentation. Dans mon cas, il n'y a qu'une seule instance du composant et il ne rend rien, donc une forme courte de "render null" convient bien.

On peut revenir comme ça,

return <React.Fragment />;

Renvoyer une valeur erronée dans la fonction render () ne rendra rien. Donc tu peux juste faire

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