返回组件时如何重构&&（）

Question

我最近进入了一个项目，开发人员正在使用这种不熟悉的语法，他们做了类似这样的事情：

    {this.props.something === 'Foo' && (
      <React.Fragment>
       Here
      </React.Fragment>
    )}

我怎么能改写这个呢？

Answer 1

由于您特别询问了如何重写这些内容，因此在某些情况下您可能会发现一些替代解决方案。假设您从这样的组件开始：class&nbsp;MyComp&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.something&nbsp;===&nbsp;'Foo'&nbsp;&&&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}}你可以把它转换成这个：class&nbsp;MyComp&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;content; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.props.something&nbsp;===&nbsp;'Foo')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>{content}</div> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}}或这个：class&nbsp;MyComp&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;conditionalContent(something)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(something&nbsp;===&nbsp;'Foo')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.conditionalContent(this.props.something)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}}甚至这个：const&nbsp;ConditionalComponent&nbsp;=&nbsp;({&nbsp;show&nbsp;})&nbsp;=>&nbsp;{ &nbsp;&nbsp;if&nbsp;(show)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}}class&nbsp;MyComp&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;content; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.props.something&nbsp;===&nbsp;'Foo')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content&nbsp;=&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</React.Fragment> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ConditionalComponent&nbsp;show={this.props.something&nbsp;===&nbsp;'Foo'}/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;}}当然，您还可以提出许多其他变体。这有望让您更多地考虑如何构建组件以获得最佳可读性。

Answer 2

由于JavaScript中的短路，整个代码基本上要么false根据条件进行评估&nbsp;this.props.something&nbsp;===&nbsp;'Foo'未填满，否则（如果条件已满），它将评估到以下React Component实例。由于React会false在渲染过程中过滤出虚假值（包括），如果有foo，这将渲染Fragment，否则它不会呈现任何内容。