javascript - ES2015中的多行分配

我才刚刚开始学习React并试图找出一些模式。有没有一种方法可以在不使用函数的情况下执行以下操作：

const myElement =
 <MyComponent>
    <ChildComponent />
 </MyComponent>

return (
  <div>
    {this.state.open ? myElement : otherElement}
  </div>
);

我知道我可以将所有内容分配给一行，但这不是可取的。
对于我来说，仅为几行创建一个新组件似乎也不值得，特别是如果不打算在其他地方使用它的话。

编辑：
有些人可能想知道为什么不仅仅使用一个函数？我认为不使用功能可能会带来性能优势。也许没有？

最佳答案

您可以将表达式包装在大括号中，JSX可以将其转换为用于构建DOM的函数。

render() {
  const myElement = (
    <MyComponent>
      <ChildComponent>
    <MyComponent>
  )

  return (
    <div>
      { this.state.open ? myElement : <span>Closed</span> }
    </div>
  )
}

通常值得进行重组，以使myElement成为适当的组件，而不仅仅是一个片段。

关于javascript - ES2015中的多行分配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35927990/