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

Question

We are using ReactJS framework, so we don't find element written in the entire code. The only way is to find the DOM element and should set the attribute. I am doing this in app.js.

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

The above solution is working fine, but if the page loading is slow, then this will not set the attribute. Is there any other way to find the element and set the attribute? I have also tried to set it using the below code after DOMContentLoaded, but it's not working. Nothing inside this event is working.

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

Answer 1

In React a good way to access DOM elements is by using useRef hook. However, if that element you want to query is not in the JSX of your current component, the useEffect hook could be used with normal JavaScript DOM methods. Like so:

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

Answer 2

You don't find the element because 'DOMContentLoaded' gets fired when HTML file completes loading, not when React renders the form.

How about using MutationObserver instead? https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Also doing that in root level app.js sounds wrong. Can you do it in the component that is closest to the container of the form?