#javascript #css #reactjs #dom #popper.js
Вопрос:
Я пытаюсь использовать popper.js чтобы разместить компонент с правой стороны от наведенного элемента. По сути, я пытаюсь сделать так: при наведении курсора мыши на значок, размещенный в заголовке, я хочу, чтобы компонент обратной связи отображался справа от зависшего значка в совершенно другом div. Насколько я понимаю, и опорный элемент, и элемент поппера должны находиться в одном и том же файле, но как я могу заставить элемент поппера выскочить из опорного элемента и расположиться на одном и том же уровне по оси X, независимо от того, прокручиваю ли я вверх или вниз?
Это мой код компонентов
import React, { useState } from "react";
import { SentryIcon } from "./SentryIcon";
import { usePopper } from "react-popper";
import { FeedbackCard } from "./FeedbackCard";
import { createPortal } from "react-dom";
//Vaviarnts are e.g. h1 h2 h3
export function Heading({
children,
bsClasses,
info,
variant,
required,
description
}) {
const [show, setShow] = useState(false);
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
modifiers: [
{
name: "offset",
options: {
offset: [10, 720]
}
},
{
name: "preventOverflow",
options: {
mainAxis: false,
altAxis: false,
padding: 50
}
}
],
placement: "right-end"
});
const DynamicHeading = `${variant}`;
return (
<div className="d-flex align-items-center">
<div className="d-flex flex-column">
<div className="d-flex">
<DynamicHeading className={`${bsClasses}`}>
{children}
</DynamicHeading>
{required amp;amp; (
<span
style={{ fontSize: "1.5rem" }}
className={`text-danger ${variant} mx-1 center`}
>
*
</span>
)}
{info amp;amp; (
<span
ref={setReferenceElement}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<SentryIcon
id={children}
icon="fas fa-info-circle"
/>
</span>
)}
</div>
{description amp;amp; (
<p className="small text-muted minus-mt-small">
{description}
</p>
)}
</div>
{show amp;amp; (
<FeedbackCard
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
title={children}
/>
)}
</div>
);
}
Ранее я позиционировал компонент карты обратной связи, передавая значение getBoundingClientRect() на карту и устанавливая ее верхнее значение, однако всякий раз, когда я прокручиваю карту, ее положение меняется. Все это находится где-то в середине окна 4200 пикселей.Высота прокрутки, возможно, вы знаете некоторые вычисления, которые можно выполнить, чтобы вычесть количество прокрутки относительно последней позиции на оси Y страницы, которые можно использовать вместе с getBoundingClientRects().top, чтобы элемент всегда оставался на одном и том же уровне Y?
Большое спасибо.