Quiero cambiar eliminar una determinada etiqueta con una identificación en la página html, por ejemplo. <div id="theid"><p>sometext</p></div>
¿Hay alguna forma de hacerlo con reaccionar js? Sé que puedo hacerlo con javascript por document.getElementById("theid").remove(); , ¿cómo puedo hacerlo en la forma de reacción? No necesito un botón ni nada, simplemente elimínelo cuando se cargue la página. Preferiría métodos sin importar módulos o bibliotecas si es posible. Gracias.
Si se representa como parte de React, la forma correcta de hacerlo sería simplemente omitirlo del código fuente:
const App = () => ( <div> <div id="theid">foo</div> <div>more content</div> </div> );a
const App = () => ( <div> <div>more content</div> </div> );Si no es parte de React, elimínelo de cualquier proceso que genere el HTML.
Si esa no es una opción, si debe ser parte del HTML que se entrega al cliente y no se representa como parte de React, entonces tendrá que recurrir a hacer lo que está haciendo actualmente:
document.getElementById("theid").remove();probablemente completamente separado de su secuencia de comandos de React, ya que es algo que desea hacer solo una vez, cuando se carga la página, y no algo que deba ser parte de los ciclos de vida de React.
Probablemente deberías usar una referencia:
https://reactjs.org/docs/refs-and-the-dom.html
Entonces, adjunta la referencia al elemento DOM, luego puede eliminar ese elemento de manera imperativa tal como lo especificó.
Entonces, en el cuerpo de la función del componente:
const myRef = useRef();Luego, en el renderizado del componente:
<Component ref={myRef} />Luego, puede usar el código en su pregunta para eliminar el elemento del DOM.
ref.remove();Si necesita hacerlo cuando se carga la página, use useEffect para lograrlo. Aunque si está eliminando un elemento en la carga de la página, me pregunto por qué necesita el elemento allí en primer lugar;).