Позиции компонентов реагируют на dom

#javascript #css #reactjs #react-hooks

#javascript #css #reactjs #реагирование-перехваты

Вопрос:

Как мне использовать useRef, чтобы получить позицию компонента непосредственно из dom В этом случае я хочу иметь возможность получить позицию элемента страницы

 import React, { useState } from 'react'
import PageItem from '../components/pageItem'
const LandingPage = () => {


    return (
        <div className={classes.mainContainer}
        >
            <PageItem/>
 
        </div>
    )
}
  

Ответ №1:

Если у вас есть ссылка, вы можете использовать любой элемент API, например getBoundingClientRect

 const LandingPage = () => {
  const divRef = useRef();

  useEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);
  return (
    <div ref={divRef} className={classes.mainContainer}>
      <PageItem />
    </div>
  );
};
  

Ответ №2:

Вы не можете добавлять ссылки к пользовательским элементам, таким как

  <PageItem/>
  

Вы можете обернуть пользовательские элементы элементами по умолчанию, такими как div, или отправлять ссылки через реквизиты дочерним элементам по умолчанию