reactjs - React 子渲染函数中的早期返回：返回 null、[] 还是 React.Fragment？

Question

假设我有一个简单的组件，它可能会或可能不会呈现计数器。

React 中表达阻塞代码路径的最佳实践是什么？它应该返回null,[]还是 a Fragment？

class App extends Component {
  renderCounter() {
    if (!this.props.shouldRenderCounter) {
      // // which should I return?
      // return; 
      // return null; 
      // return []; 
      // return <React.Fragment />; 
    }
    return <Counter />;
  }

  render() {
    return (
      <div>
        {this.renderCounter()}
      </div>
    );
  }
}

我认为null是最清楚的，但我可以想象如果返回函数周围的上下文需要一个组件，它会导致问题。[]对我来说，Fragment两者似乎都是不错的选择，除了 Fragment 更容易阅读。有什么不同？

Answer 1

React 团队建议返回null：

在极少数情况下，您可能希望组件隐藏自己，即使它是由另一个组件呈现的。为此，返回 null 而不是其渲染输出。

Answer 2

您不需要为它创建额外的功能。

这将完成这项工作：

class App extends Component {
  render() {
    return (
      <div>
        {this.props.shouldRenderCounter && <Counter />}
      </div>
    );
  }
}