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多个子组件的条件呈现

回答

相关问题