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

Pour les développeurs qui sont venus à cette question de savoir où ils peuvent renvoyer null à partir d'un composant au lieu de vérifier en mode ternaire pour rendre ou ne pas rendre le composant, la réponse est OUI, Vous Pouvez!

je veux dire au lieu de cette condition ternaire inside your jsx dans la partie render de votre composant:

// some component body
return(

   {/* some ui */}

   { someCondition &&  }
   ou
   { someCondition ?  : null }

   {/* more ui */}

)

vous pouvez vérifier cette condition à l'intérieur de votre composant comme ceci:

const MyComponent:React.FC = () => {

  // get someCondition from context at here before any thing

  if(someCondition) return null; // i mean this part , checking inside component! 

  return (

     // some ui...

  )
}

Considérez simplement que dans mon cas, je fournis la variable someCondition à partir d'un contexte dans un composant de niveau supérieur (par exemple, imaginez-le dans votre esprit) et je n'ai pas besoin de propager someCondition à l'intérieur de MyComponent.

Regardez simplement à quel point votre code devient propre après cela, je veux dire que vous n'avez pas besoin d'utiliser d'opérateur ternaire à l'intérieur de votre JSX, et votre composant parent ressemblerait à ceci:

// some component body
return(

   {/* some ui */}

   {/* more ui */}

)

et MyComponent s'occupera du reste pour vous!

Answer 2

Nous pouvons retourner comme ceci,

return ;

Answer 3

Retourner une valeur fausse dans la fonction render() ne rendra rien. Donc vous pouvez simplement faire

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