React Bootstrap4 модальное размещение - PullRequest
Новая
       44

React Bootstrap4 модальное размещение

0 голосов
/ 31 мая 2018

У меня есть компонент, открывающий модальный загрузчик (с использованиемact-bootstrap4-модальный)

Он открывается и закрывается с помощью этого 

{this.state.inEditMode ? <MemberModal /> : null}

Однако, поскольку компонент ужевложенный где-то в DOM, это недопустимое размещение для модальной разметки начальной загрузки.Он оставляет неприятный белый столбик внизу, что, как я подтвердил, не произойдет, если он расположен внутри самой внешней метки <App/> div.

Есть ли простой способ исправить это?Или это потребует, чтобы я поместил все мои модальные компоненты в <App/> и изменил состояние <App/> из вложенных дочерних элементов?

1 Ответ

0 голосов
/ 31 мая 2018

Это проблема стека z-index , которая была распространенной до тех пор, пока React не представила portals .Дан Абримов из команды FB собрал кодовое перо с примером, который можно найти здесь .

Порталы предоставляют первоклассный способ рендеринга детей в DOM-узел, которыйсуществует за пределами иерархии DOM родительского компонента.

Типичным вариантом использования порталов является случай, когда родительский компонент имеет переполнение: скрытый стиль или стиль z-index, но вам нужно, чтобы дочерний элемент визуально «вырвался» изего контейнер.Например, диалоговое окно , карты-подсказки и всплывающие подсказки.

Обычно, когда вы возвращаете элемент из метода рендеринга компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла: 

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

Однако иногда бывает полезно вставить ребенка в другое место в DOM: 

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}
...