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

Question

假设我有一个可能会也可能不会提供Counter的简单组件。

在React中表达被阻止的代码路径的最佳实践是什么？ 它应该返回null ， []还是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最清楚，但是我可以想象，如果return函数周围的上下文需要一个组件，它将导致问题。 在我看来[]和Fragment似乎都是不错的选择，但Fragment较易读。 有什么不同？

Answer 1

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

这将完成工作：

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

Answer 2

React团队建议返回null ：

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