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

Question

我试图了解 React Portals，所以我查看了文档。

我仍然不明白为什么在他们的例子中（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，我们会将模态渲染到其中。因为每个 Modal 组件都有自己的元素，所以我们可以将多个 modal 组件渲染到 modal 容器中。

在这个stackblitz示例中，我尝试在不使用额外 div 的情况下将多个组件渲染到门户容器中，它似乎工作得很好，React.createPortal已经将子组件附加到容器中，并且当组件卸载时，它只会从容器中移除子组件，并且不会清除容器的所有内容，因此我们不必手动执行此操作。我错过了什么吗？