@tostershmoster

Почему не передаются значения вычисленные в функции в стили компонента?

const Sheets:FC<Props> = ({ clickedIconRect }) => {
  // ...
    // значение переменной для теста
    clickedIconRect = {
    left: 400,
    right: 450,
    top: 500,
    bottom: 570,
    x: 400,
    y: 500,
    width: 50,
    height: 70,
    toJSON: () => {},
  };

  const clickedIconCenter: TElementCoords = { x: 0, y: 0 };
  const sheetTopLeftPosition: TElementCoords = { x: 0, y: 0 };

  const getClickedIconCenter = (iconRect: DOMRect) => {
    if (iconRect) {
      clickedIconCenter.x = iconRect.left + ((iconRect.right - iconRect.left) / 2);
      clickedIconCenter.y = iconRect.top + ((iconRect.bottom - iconRect.top) / 2);
    }
    console.log(clickedIconCenter);  // в консоли показывает правильные значения вычисленные из clickedIconRect
  };

  const getSheetsPosition = () => {
    const sheetsElementRect = document.querySelector('.sheets')?.getBoundingClientRect();

    if (sheetsElementRect) {
      sheetTopLeftPosition.x = clickedIconCenter.x
        - ((sheetsElementRect.right - sheetsElementRect.left) / 2);

      sheetTopLeftPosition.y = clickedIconCenter.y
        - ((sheetsElementRect.bottom - sheetsElementRect.top) / 2);
    }

    console.log(sheetTopLeftPosition); // в консоли выводятся верные значения
  };

  useLayoutEffect(() => {
    getSheetsPosition(); // здесь рассчитываются значения которые нужно передать
  }, []);

  useEffect(() => {
    if (clickedIconRect) {
      getClickedIconCenter(clickedIconRect);
    }
  }, [clickedIconRect]);

  return (
    <div
      className="sheets"
      style={{
        top: `${sheetTopLeftPosition.y}px`, // в браузере значение 0px
        left: `${sheetTopLeftPosition.x}px`, // в браузере значение 0px
      }}>

      <div className="sheets__wrapper">
        <ul className="sheets__items-list">
          {sheetItems.map((item) => (
            <li
              className="sheets__item"
              key={item.id}
              onClick={handleSheetItemClick}
            >
              {item.value}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Sheets;
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы