Question

我最近进入一个项目，开发人员正在使用这种陌生的语法，他们在其中做了如下操作：

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

还有什么可以改写的？

Answer 1

由于short circuiting in JavaScript，如果条件满足，整个代码基本上要么评估为false

 this.props.something === 'Foo'

不会被填充，否则（如果条件被填充）它将评估为以下React Component实例。由于React在渲染过程中会滤除虚假值（包括false），因此如果某物为foo，则将渲染Fragment，否则将不渲染任何东西。

Answer 2

@Jonas Wilms'的答案很好地介绍了语法。但是，由于您是专门询问如何重写的，因此这里有一些替代解决方案，在某些情况下可能会更可取。

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

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>
    );
  }
}

当然，您可以提出许多其他变体。希望这足以使您更多地考虑如何构造组件以实现最佳可读性。

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

2 个答案: