如何在我的反應應用程序中使用 Javascript select 我的標題

Question

簡單的問題。 如何在我的 React 組件中使用 Vanilla JS？

舉個例子：

這不起作用，但是為什么？

function Home() {
    const title = document.querySelector('h1');
    console.log(title)                 // undefined

  return (
    
      <div >
        <h1>Pouet</h1>
      </div>
  );
}

Answer 1

要在 React 中獲取對元素的引用，可以使用useRef掛鈎。

function Home() {
  const titleRef = React.useRef(null);

  React.useLayoutEffect(() => {
     console.log(titleRef.current);
  }, []);

  return (
      <div>
        <h1 ref={titleRef}>Pouet</h1>
      </div>
  );
}

參考： https://reactjs.org/docs/hooks-reference.html#useref