使用React Portal时创建一个额外的div容器有什么好处？

Question

我试图了解React 门户，所以我看了documentation。

我仍然不明白为什么在他们的示例（https://codepen.io/gaearon/pen/yzMaBd和https://reactjs.org/docs/portals.html#event-bubbling-through-portals）中他们在构造函数中创建了一个额外的div并将其传递给createPortal函数的第二个参数

他们为什么不像这样直接使用modalRoot容器？

const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      modalRoot,
    );
  }
}

在codepen示例中，此注释给出了解释

  

创建一个div，将其渲染为模态。由于每个模式组件都有自己的元素，因此我们可以将多个模式组件渲染到模式容器中。

在这个stackblitz的示例中，我尝试在不使用额外div的情况下将多个组件呈现到门户容器 中，并且看起来效果很好，React.createPortal已经添加了子元素到容器上，并且在卸载组件时，它只会从容器中删除子容器，并且不会清除容器中的所有内容，因此我们不必手动执行此操作。我想念什么吗？