如何在我的反应应用程序中使用 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