Javascript 反应多个子组件的条件渲染

我试图根据状态呈现多个子组件，但是我只能返回一个子组件（SyntaxError：相邻的JSX元素必须包装在封闭的标记中）

每个子组件都传递相同的道具，如何保持代码干燥

工作

导出默认值（{changeState，myState，handleClick}）=>(
航行
changeState（）}>导航
{我的国家？
：null
}
)

不要

导出默认值（{changeState，myState，handleClick}）=>(
航行
changeState（）}>导航
{我的国家？
：null
}
)

我们不能直接返回多个元素

可能的解决方案：

1-您需要将所有元素包装在

div

或任何其他包装元素中

2-我们也可以返回一个包含多个元素的数组，因此将所有项目放入一个数组中，然后返回该数组

像这样：

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

您还可以使用ReactJS中的

：

使用

包装所有元素的问题在于，您正在向DOM添加更多元素，有时这是不可能的（例如，当您在

中渲染

或

时）。因此，这里是

帮助我们的地方

只需将所有这些元素包装在

中，就足够了。 意思是：

{myState&&
}

无论如何，这另一种“条件呈现”方法在“代码可读性”方面更好：

它基本上建议使用

元素，如：

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

,
,

---

^这看起来更适合我的眼睛：D

谢谢，使用

{myState&&&…}

语法非常方便。这个

条件的
组件似乎是一个不必要的抽象，添加了更多的样板代码：（我觉得人们对他们的“智能抽象”太过努力了）.事实是，人们不知道你的抽象是什么，但大多数程序员都知道基本的JS语法…当你将代码移动到一个单独的项目中时，情况会变得更糟，现在人们不得不实际进入该项目，看看为什么它不起作用。@Doug是的，我同意。我总是只使用
{！！var&}
。但有时（一些团队）要求所有内容都必须是声明性的，因此他们使用这种行为。有时他们不得不这样做，因为存在一些动态代码生成，以及一些其他magics/yerbas。Fragment的简短使代码更具可读性。然而，并非所有工具都支持它。@Sourabh Yeap。即使Github在语法简短时也会破坏所有颜色我认为
组件概念是一个很好的概念。React应该像Vue.js一样有这样的开箱即用的东西。
{myState ?
    [
        <NavigationItem handleClick={handleClick} title={'#Link-1'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-2'} />,
        <NavigationItem handleClick={handleClick} title={'#Link-3'} />
    ]
  : null
}

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

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