React多個子組件的條件呈現

我試圖呈現多個子組件依賴於狀態，但是我只能夠返回一個子組件（SyntaxError：相鄰的JSX元素必須包裝在封閉標記中）React多個子組件的條件呈現

每個子組件都通過相同的道具，這個代碼如何保持乾爽？

作品

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

不要

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

來源

2017-08-31 silversurfer

直接，我們不能返回多個元素。

可能的解決方案：

無論你需要用一個div或任何其他包裝元素的所有元素。

2-我們也可以返回多個元素的數組，所以把所有的項都放在一個數組中，然後返回數組。

像這樣：

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

檢查這個例子：

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

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

這將引發錯誤：

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

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

來源

2017-08-31 20:10:13

謝謝，非常方便使用'{myState && ...}'的語法。 –

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

你應該換行JSX成<div/>

來源

2017-08-31 20:11:24 Nocebo

數組會更好。 – Andrew

您還可以使用<Fragment>從ReactJS：https://reactjs.org/docs/fragments.html

有關包裝的所有元素與<div>的問題，是你在DOM中添加更多元素，有時這是不可能的（例如，當您在<table>內呈現<td>或<tr>時。所以，這裏是<Fragment>來幫助我們。

只需將所有這些元素包裝在<Fragment>中就足夠了。含義：

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

不管怎麼說，這另一個「條件顯示」的做法是在「代碼的可讀性」感覺更好：https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

它基本上提出了使用<Conditional>元素，如：

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

^這看起來對我的眼睛好：d

來源

2018-02-14 00:39:20

React多個子組件的條件呈現

回答

相關問題