es2015 中的多行分配

Multiline assignment in es2015

本文关键字：分配 es2015      更新时间：2023-09-26

我刚刚开始学习 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成为一个适当的组件，而不仅仅是一个片段。

相关文章：