javascript - 将 ReactDOM.createPortal 插入元素作为目标容器的第一个子元素(而不是最后一个子元素)

Question

所以我正在使用 ReactDOM.createPortal 在其正常 DOM 放置之外呈现元素。我必须这样做，因为我正在与创建它自己的元素(在我的范围之外)的库进行交互，并且我必须将我的 DOM 元素之一放在他们的元素中。

我使用 createPortal 得到的是:

<div class="target">
    <div />
    <div class="myDiv" />
</div>

我要实现的目标:

<div class="target">
    <div class="myDiv" />
    <div/>
</div>

我似乎找不到如何更改 createPortal 的行为，使其将节点作为第一个子节点插入。

Answer 1

React 将使用 appendChild 来呈现门户，此行为是固有的，不会更改。

如果一个 portal 应该在其他 child 之前显示，则应该在现有的 DOM 中提供一个容器:

<div class="target">
    <div class="portal-container">...rendered portal...</div>
    <div />
</div>

如果这不可能，则应直接访问 DOM 以编程方式预先添加容器，类似于 this guide example :

class PrependedPortal extends React.Component {
  portalRoot = document.querySelector('.target');
  portalContainer = document.createElement('div');

  componentDidMount() {
    this.portalRoot.prepend(this.portalContainer);
  }

  componentWillUnmount() {
    this.portalRoot.removeChild(this.portalContainer);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.portalContainer
    );
  }
}

prepend isn't well-supported and needs to be polyfilled或替换为类似的 DOM 操作，例如jQuery 前置。