Сделать элемент вставки ReactDOM.createPortal как первый дочерний элемент целевого контейнера (вместо последнего дочернего элемента)

Question

Так что я использую ReactDOM.createPortal для рендеринга элемента вне его обычного размещения DOM.Я должен сделать это, так как я взаимодействую с библиотекой, которая создает свои собственные элементы (вне моей области видимости), и я должен поместить один из своих элементов DOM внутри их.

Что я получаю, используя createPortal is:

<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, чтобы программно добавить в скобки контейнер, аналогично этому примеру руководства :

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 не очень хорошо поддерживается и должен быть заполнен или заменен аналогичными манипуляциями с DOM, например, jQuery prepend.