所以我正在使用 ReactDOM.createPortal
在其正常 DOM 放置之外呈现元素。我必须这样做,因为我正在与创建它自己的元素(在我的范围之外)的库进行交互,并且我必须将我的 DOM 元素之一放在他们的元素中。
我使用 createPortal
得到的是:
<div class="target">
<div />
<div class="myDiv" />
</div>
我要实现的目标:
<div class="target">
<div class="myDiv" />
<div/>
</div>
我似乎找不到如何更改 createPortal
的行为,使其将节点作为第一个子节点插入。
最佳答案
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 前置
。
关于javascript - 将 ReactDOM.createPortal 插入元素作为目标容器的第一个子元素(而不是最后一个子元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52658703/