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

Question

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

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是最清楚的，但我可以想象如果返回函数周围的上下文需要一个组件，它会导致问题。[]而Fragment这两个看似细微的选项对我来说，除了片段是更容易一些阅读。有什么不同？

Answer 1

返回null被推荐的阵营团队：

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