如何在我的反应应用程序中使用 Javascript 选择我的标题答案

【问题标题】：How can I select my title with Javascript in my react App如何在我的反应应用程序中使用 Javascript 选择我的标题
【发布时间】：2021-04-20 07:54:03
【问题描述】：

简单的问题。如何在我的 React 组件中使用 Vanilla JS？

例如：

这不起作用，但是为什么？？

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

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

【问题讨论】：

看看here。
我相信您正在尝试在元素存在之前访问它。
因为它是在组件第一次渲染之前运行的，但是您实际上想要实现什么？
因为当该行运行时 h1 元素还不存在。您正在使用 React，因此您需要使用 Ref.但是，您的整个方法很可能是错误的；使用 React，你很少直接操作 DOM，如果有的话。
这能回答你的问题吗？ Using document.querySelector in React? Should I use refs instead? How?

标签： javascript reactjs queryselector

【解决方案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

【讨论】：

嗯，我的理解是在 React App 中使用 vanilla Js 不是一个好习惯。我过去常常分开处理 React 或 JavaScript，但不是一起工作。那么最好做一个 HTMLL CSS 和 Javascript 网站或一个反应应用程序？
这一切都取决于你的要求，正如我在上面所展示的，在 React 中有一些方法可以访问 DOM 元素，但是你想要采用哪种方法取决于为什么你想访问 dom 元素吗？