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

Question

我最近进入了一个项目，开发人员正在使用这种不熟悉的语法，他们做了类似这样的事情：    {this.props.something === 'Foo' && (       <React.Fragment>        Here       </React.Fragment>     )}我怎么能改写这个呢？

Answer 1

由于您特别询问了如何重写这些内容，因此在某些情况下您可能会发现一些替代解决方案。

假设您从这样的组件开始：

class MyComp extends Component {
  render() {
    return (
      <div>
        {this.props.something === 'Foo' && (
          <React.Fragment>
            Here
          </React.Fragment>
        )}
      </div>
    );
  }}

你可以把它转换成这个：

class MyComp extends Component {
  render() {
    let content;
    if (this.props.something === 'Foo') {
      content = (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }
    return (
      <div>{content}</div>
    );
  }}

或这个：

class MyComp extends Component {
  conditionalContent(something) {
    if (something === 'Foo') {
      return (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }
  }
  render() {
    return (
      <div>
        {this.conditionalContent(this.props.something)}
      </div>
    );
  }}

甚至这个：

const ConditionalComponent = ({ show }) => {
  if (show) {
    return (
      <React.Fragment>
        Here
      </React.Fragment>
    );
  }}class MyComp extends Component {
  render() {
    let content;
    if (this.props.something === 'Foo') {
      content = (
        <React.Fragment>
          Here
        </React.Fragment>
      );
    }
    return (
      <div>
        <ConditionalComponent show={this.props.something === 'Foo'}/>
      </div>
    );
  }}

当然，您还可以提出许多其他变体。这有望让您更多地考虑如何构建组件以获得最佳可读性。

Answer 2

由于JavaScript中的短路，整个代码基本上要么false根据条件进行评估

 this.props.something === 'Foo'

未填满，否则（如果条件已满），它将评估到以下React Component实例。由于React会false在渲染过程中过滤出虚假值（包括），如果有foo，这将渲染Fragment，否则它不会呈现任何内容。