web-dev-qa-db-fra.com

Meilleure pratique pour un composant "vide" - null? div vide? (Un élément React valide (ou nul) doit être retourné))

J'utilise TypeScript et je réagis pour un projet et j'ai un cas de composants imbriqués où je veux seulement que le composant interne donne du contenu si une condition est vraie.

Par exemple:

export const SomeOverview = (info) => {
  ... // some data manipulation
  return (
     <div>
        <div><.... a bunch of stuff</div>
        <SomeDetail data={data}/>
     </div>
  )
}

export const SomeDetail = (info) => {
    ...
    if (<some condition using info) {
        return (
            <div>
                <some content using info>
            </div>
        )
    }
    return null or <div/> ?
}

Je ne peux tout simplement pas ne rien retourner si je n'entre pas dans l'instruction if, sinon j'obtiens l'erreur de l'élément react.

Donc pour l'instant, j'avais essayé de mettre un div vide mais cela ressemble un peu à un hack. Existe-t-il une "meilleure" manière de réaliser?

reactjstypescript
12
CustardBun

Renvoyer null est la voie à suivre.

De la documentation officielle:

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.

https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering

10
klugjo