@beefront17

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

Добрый день! Помогите пожалуйста найти готовое решение(react).
Проблема следующая:
Нужно при клике выводить dropdown у элемента по которому кликнул. Layout приложения построен таким образом, что этот dropdown не может быть над всеми элементами, я не могу поставить ему z-index и решить эту проблему css-ом. Соответственно надо, чтобы этот dropdown вставлялся на верхнем уровне, где-то около body.
Вопрос есть ли какое-то готовое решение для react, чтобы элемент вставлялся где-то около body и отображался у элемента по которому состоялся event.
Спасибо!
  • Вопрос задан
  • 2313 просмотров
Решения вопроса 2
SvyatYa
@SvyatYa
FrontEnd developer
Да, это называется порталы, вот раздел в документации:
https://reactjs.org/docs/portals.html
Ответ написан
@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;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 23:00
5000 руб./за проект
19 апр. 2024, в 20:43
20000 руб./за проект