es2015 中的多行赋值答案

【问题标题】：Multiline assignment in es2015es2015 中的多行赋值
【发布时间】：2016-03-10 21:48:51
【问题描述】：

我刚刚开始学习 React 并试图找出一些模式。有没有办法在不使用函数的情况下做这样的事情：

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

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

我意识到我可以将它全部分配到一行，但这是不可取的。对我来说，仅仅为几行创建一个新组件似乎也不值得，特别是如果它不会在其他地方使用。

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

【问题讨论】：

“我认为不使用函数可能会带来性能优势” --- 这个猜测是基于......什么？
基于假设。 :) 我希望有人也能回答这个问题。
@zerkms - 正如你所说，这只是一个猜测。
你永远猜不到性能。在您尝试考虑优化某些东西之前 - 您必须有一个可靠的基线。除非你拥有它——你所做的一切都是没有意义的。
请澄清你的问题——我不明白你在问什么。您只能从函数中return。而不是return，您可以将其分配给一个变量，然后对其进行处理。我不知道这是什么背景。此外，组件是状态所在。

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

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

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

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

【讨论】：

这是一个表达式，而不是一个语句。