将ref作为道具传递以获取offsetTop

import React, { useRef } from 'react';

function App() {
  const myRef = useRef(null);

  const handleClick = () => {
    if (myRef.current) {
      console.log(myRef.current.offsetTop);
    }
  };

  return (
    <div>
      <div ref={myRef} style={{ height: '100px', backgroundColor: 'red' }}>
        Click me to get offsetTop
      </div>
      <button onClick={handleClick}>Get offsetTop</button>
    </div>
  );
}

export default App;

import React, { useRef, useEffect } from 'react';

function App() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      console.log(myRef.current.offsetTop);
    }
  }, []);

  return (
    <div>
      <div ref={myRef} style={{ height: '100px', backgroundColor: 'red' }}>
        Click me to get offsetTop
      </div>
    </div>
  );
}

export default App;