Reagieren bedingte Rendering von mehreren untergeordneten Komponenten

Question

ich jedoch mehr untergeordneten Komponenten je nach Zustand zu bringen versuche ich nur in der Lage bin ein Kind Komponente zurückzukehren (Syntaxerror: Angrenzend JSX Elemente in einem umschließenden Tag gewickelt werden muss)

Jede Kindkomponente übergibt dieselben Requisiten, wie könnte dieser Code DRY bleiben?

Works

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

nicht

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> 
) 

Answer 1

Direkt können wir nicht mehr als ein Element zurück.

Mögliche Lösungen:

1- Entweder müssen Sie alle Elemente in einem div oder einem anderen Hüllenelement wickeln.

2- Wir können auch ein Array mit mehreren Elementen zurückgeben, also alle Elemente in ein Array einfügen und das Array zurückgeben.

So:

{myState ? 
    [ 
     <NavigationItem handleClick={handleClick} title={'#Link-1'} />, 
     <NavigationItem handleClick={handleClick} title={'#Link-2'} />, 
     <NavigationItem handleClick={handleClick} title={'#Link-3'} /> 
    ] 
    : null 
} 

prüfen dieses Beispiel:

let b = true ? [1,2,3,4]: null; 
 

 
console.log('b = ', b);

Dies wird Fehler werfen:

let b = true? 1 2 3 4: null; 
 

 
console.log('b = ', b);

Answer 2

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> 
) 

Sie sollten die JSX wickeln in ein <div/>

Answer 3

Sie auch <Fragment> von ReactJS verwenden können: https://reactjs.org/docs/fragments.html

Das Problem zu wickeln alle Elemente mit einem <div>, ist, dass Sie Hinzufügen weiterer Elemente zum DOM, und manchmal ist es unmöglich (zum Beispiel, wenn Sie eine <td> oder <tr> innerhalb einer <table> rendern. Also, hier ist, wo <Fragment> kommt, um uns zu helfen.

Wickeln Sie einfach alle diese Elemente in einem <Fragment> und es wird genug sein. Bedeutung:

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

Anyways, dies ein weiterer "Conditional Rendering" Ansatz ist besser in "Lesbarkeit des Codes" sense: https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

Er schlägt grundsätzlich die Verwendung eines <Conditional> Element, wie:

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

^Das sieht besser für meine Augen: D