Réagir conditionnelle rendu de plusieurs composants enfants

Je suis en train de rendre de multiples composants enfants en fonction de l'état cependant, je suis seulement capable de renvoyer un enfant composant (SyntaxError: à côté de l'JSX éléments doit être enveloppé dans une balise englobante)

Chaque composant enfant passe la même chose des décors, de la façon dont ce code pourrait-il être gardé au SEC?

Œuvres

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <span>Navigation</span>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
              : null
            }
    </Navigation>
)

Ne pas

export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                <NavigationItem handleClick={handleClick} title={'#Link-3'} />
              : null
            }
    </Navigation>
)

OriginalL'auteur silversurfer | 2017-08-31

  1. 8

    Vous pouvez également utiliser <Fragment> de ReactJS: https://reactjs.org/docs/fragments.html

    Le problème sur l'ajustement de tous les éléments avec un <div>, c'est que vous êtes ajoutant plus d'éléments du DOM, et il est parfois impossible (par exemple, lorsque vous êtes rendu un <td> ou <tr> à l'intérieur d'un <table>. C'est ici où <Fragment> vient nous aider.

    Juste envelopper de tous ces éléments dans un <Fragment> et ça va être assez.
    Sens:

    { myState &&
  <Fragment>
    <NavigationItem handleClick={handleClick} title={'#Link-1'} />
    <NavigationItem handleClick={handleClick} title={'#Link-2'} />
    <NavigationItem handleClick={handleClick} title={'#Link-3'} />
  </Fragment>
}

    De toute façon, cette autre "Rendu Conditionnel" approche est la meilleure "lisibilité du code" sens: https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

    Essentiellement, il propose l'utilisation d'un <Conditional> élément, comme:

    <Conditional if={myState}>
  <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
</Conditional>

    ^ C'est mieux pour les yeux 😀

    OriginalL'auteur Broda Noel

  2. -1
    export default ({changeState, myState, handleClick}) => (
    <Navigation>
            <h1>Navigation</h1>
            <button onClick={() => changeState()}>Navigation</button>
            { myState ?
                <div>
                  <NavigationItem handleClick={handleClick} title={'#Link-1'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-2'} />
                  <NavigationItem handleClick={handleClick} title={'#Link-3'} />
                </div>
              : null
            }
    </Navigation>
)

    Vous devez envelopper la JSX dans un <div/>

    Un tableau sera mieux.

    OriginalL'auteur Nocebo