Вывести элемент по клику, react?

Question

[beefront17]

Добрый день! Помогите пожалуйста найти готовое решение(react).
Проблема следующая:
Нужно при клике выводить dropdown у элемента по которому кликнул. Layout приложения построен таким образом, что этот dropdown не может быть над всеми элементами, я не могу поставить ему z-index и решить эту проблему css-ом. Соответственно надо, чтобы этот dropdown вставлялся на верхнем уровне, где-то около body.
Вопрос есть ли какое-то готовое решение для react, чтобы элемент вставлялся где-то около body и отображался у элемента по которому состоялся event.
Спасибо!

Answer 1

[Святослав]

Да, это называется порталы, вот раздел в документации:
https://reactjs.org/docs/portals.html

Comments

[beefront17]

Точно, спасибо)

Answer 2

[Vallefor]

Да, нужно использовать порталы. Имеет смысл создать специальный компонент для этого.

Portal.jsx:

import React, { Component } from "react";
import ReactDOM from "react-dom";


class Portal extends Component {
  componentWillUnmount() {
    document.body.removeChild(this.defaultNode);
  }
  render()
  {
    if(!this.defaultNode) {
      this.defaultNode = document.createElement('div');
      document.body.appendChild(this.defaultNode);
    }
    return ReactDOM.createPortal(this.props.children,this.defaultNode)
  }
}
export default Portal;

Потом используем в любом компоненте:

import Portal from "./Portal";
//...

class App extends Component {
  render()
  {
      return (
         <div>
            <Portal>
               <div style={{zIndex:10000}}>Этот див буде добавлен перед закрытием body</div>
            </Portal>
         </div>
      );
  }
}
export default App;