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

Question

[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;

Comments

[szQocks]

Сам я конечно ещё не очень опытный да и не сталкивался с подобной проблемой, но могу написать свою мысль если интересно =)

useLayoutEffect - отрабатывает когда уже компонент был смонтирован, грубо говоря компонент уже готов

твоя переменная sheetTopLeftPosition ты её изменяешь после того как компонент был уже отрисован, понимаешь ? А толку ты её изменяешь если компонент не обновляется после этого ? React не следит за каждой переменной которая объявлена внутри

за место переменной sheetTopLeftPosition - сделать стейт и например обновить стейт вот в этом месте -

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

[szQocks]

да и вообще странно что ты решил юзать useLayoutEffect в такой ситуации, когда sheets у тебя находится в этом же компоненте, на sheets можно просто повесить ref

[Just Me]

не проще сделать вычисления в родительском и передать в дочерний?