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而不是其渲染輸出。