Est-il possible de retourner vide dans la fonction de rendu de React?

Question

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

Ce que je veux faire, c'est que si le délai est déjà écoulé, je veux juste ne rien afficher :

render() {
  let finalClasses = "" + (this.state.classes || "");
  if (isTimeout){
    return (); // ici il y a une erreur de syntaxe
  }
  return ({this.props.children});
}

Le problème est :

return (); // ici il y a une erreur de syntaxe

Answer 1

Oui, vous pouvez le faire, mais au lieu de laisser vide, il suffit de retourner null si vous ne voulez rien rendre du composant, comme ceci :

return (null);

---

Un autre point important est que, à l'intérieur de JSX, si vous rendez un élément conditionnellement, alors dans le cas où condition=false, vous pouvez retourner l'une de ces valeurs false, null, undefined, true. Selon la DOC:

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

Toutes ces expressions JSX se rendront de la même manière :

Exemple :

Seules les valeurs impaires seront rendues, car pour les valeurs paires, nous retournons null.

const App = ({ number }) => {
  if(number%2) {
    return (

        Number: {number}

    )
  }

  return (null);           //===> remarquez ici, en retournant null pour les valeurs paires
}

const data = [1,2,3,4,5,6];

ReactDOM.render(

    {data.map(el => )}
  ,
  document.getElementById('app')
)

Answer 2

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

Si vous voulez qu'un composant ne rende rien, il suffit de retourner null, selon la doc :

Dans de rares cas, vous pouvez vouloir 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 retourner undefined, par exemple, vous obtiendrez l'erreur suivante :

Aucun élément n'a été rendu. Cela signifie généralement qu'une instruction return est manquante. Ou, pour ne rien afficher, retournez null.

Comme l'ont souligné d'autres réponses, null, true, false et undefined sont des enfants valides utiles pour le rendu conditionnel à l'intérieur de votre jsx, mais si vous voulez que votre composant se cache / ne rende rien, il suffit de retourner null.

EDIT React 18 :

React 18 permettra de rendre undefined au lieu de générer une erreur. Consultez cet annonce.

Answer 3

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

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

Conformément à la documentation:

false, null, undefined, et true sont des enfants valides. Ils ne sont simplement pas rendus.

Vous pourriez écrire

return null; ou
return false; ou
return true; ou
return {undefined}; 

Cependant, return null est le plus préféré car il signifie qu'aucune valeur n'est retournée

Answer 4

Légèrement hors-sujet mais si vous avez déjà besoin d'un composant basé sur une classe qui ne rend jamais rien et que vous êtes heureux d'utiliser une syntaxe ES encore non standardisée, vous pouvez utiliser :

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 fonction render et c'est la forme la plus concise qui satisfait cette exigence à laquelle je peux penser.

J'utilise actuellement ce tour de passe-passe dans une variante de ScrollToTop empruntée à la documentation de react-router. Dans mon cas, il n'y a qu'une seule instance du composant et il ne rend rien, donc une forme abrégée de "render null" s'intègre bien.

Answer 5

Si vous utilisez Typescript et que votre composant/fonction a un type de retour React.Element, vous obtiendrez l'erreur suivante.

Type 'null' n'est pas assignable au type 'ReactElement'.

La solution est React.Fragment.

return 

ou

return <>