如何在 React 中访问不在 JSX 中的 dom 元素？

Question

我们使用的是 ReactJS 框架，所以我们没有在整个代码中找到元素。 唯一的方法是找到 DOM 元素并设置属性。 我在 app.js 中这样做。

setTimeout(function () {
  const formElement = document.getElementsByTagName('form')
  formElement.item(0).setAttribute('autocomplete', 'off')
}, 1000)

上述解决方案工作正常，但如果页面加载缓慢，则不会设置属性。 有没有其他方法可以找到元素并设置属性？ 我也尝试在 DOMContentLoaded 之后使用以下代码设置它，但它不起作用。 此事件中的任何内容都不起作用。

document.addEventListener('DOMContentLoaded', () => {
   const formElement = document.getElementsByTagName('form')
   formElement.item(0).setAttribute('autocomplete', 'off')
})

Answer 1

在 React 中访问 DOM 元素的一个好方法是使用useRef钩子。 但是，如果您要查询的元素不在当前组件的 JSX 中，则可以将useEffect挂钩与普通 JavaScript DOM 方法一起使用。 像这样：

useEffect(()=>{
  const formElement = document.getElementsByTagName('form')
  formElement.item(0).setAttribute('autocomplete', 'off')
},[]);

Answer 2

您找不到该元素，因为“DOMContentLoaded”在 HTML 文件完成加载时触发，而不是在 React 呈现表单时触发。

改用 MutationObserver 怎么样？ https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

在根级别 app.js 中也这样做听起来是错误的。 能不能在离表单容器最近的组件里做呢？