javascript - 如何在 JSX/React 中使用三元运算符渲染多个组件？

Question

抱歉，如果我的术语有误，我不确定这些东西叫什么。我见过一些人以这种方式解构组件:

// instead of
return (
  <div>
    <Component />
  </div>
)

// they do this
const component = (
  <div>
    <Component />
  </div>
)

return (
  {component}
)

我喜欢它，因为它使代码更有条理，我不知道这个方法到底叫什么，这使得在其他地方寻找答案有点困难。我的问题是如何以他的方式将多个组件放入三元运算符中？像这样的东西:

const component = (
  <div>
    <Component />
  </div>
)
const otherComponent = (
  <div>
    <OtherComponent />
  </div>
)

return (
  {this.state.conditional ? component otherComponent : ""}
)

如果我尝试此操作，应用程序将无法编译，错误为:解析错误:意外标记，应为“}”。

我尝试了几种变体，例如将变量括在大括号、逗号或其他内容中，但似乎没有任何效果。我确信我在这里遗漏了一些关键的东西。

Answer 1

你可以将它们包装在像这样的片段中，它应该可以工作:

{this.state.conditional ? <>{component} {otherComponent}</> : ""}

您遇到了问题，因为您基本上试图从三元中返回两个内容。这就像一个函数执行 () => {return a;返回 b;}。即使它确实有效，您也会因渲染多个 react 元素而收到错误。

通过将其包装在单个标签(如片段)中，您可以告诉它返回由两个值组成的单个元素。