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来呈现门户，此行为是内在的，不会改变。

如果在其他子项之前显示门户，则应在现有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 prepend。

将ReactDOM.createPortal插入元素设为目标容器的第一个子代（而不是最后一个子代）

1 个答案: