Estoy tratando de crear una aplicación de reacción, y lo que estoy tratando de hacer es tener la aplicación y tener una sección/componente dentro de la cual necesitaré el posicionamiento, el ancho y la altura. Pero cuando trato de usar document.getElementById('area').getBoundingClientRect().width (para encontrar el ancho, por ejemplo), no puedo apuntar al componente. En cambio, mi código parece fallar a menos que use document.getElementById('root').getBoundingClientRect().width .
Mi archivo:
import './App.css'; class App extends React.Component { render() { return ( <main> <Space /> </main> ); } } class Space extends React.Component { constructor(props) { super(props); } render() { return ( <div class="space"> <h1>{document.getElementById('root').getBoundingClientRect().width}</h1> </div> ); } } export default App; Tengo que usar 'root' en lugar de 'area' para que funcione. Un "espacio" es solo un área de la que necesito saber las coordenadas. Gracias.
Editar: Aquí está el archivo con id="root":
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="src/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>En la mayoría de los casos, debe usar una referencia de reacción para obtener el elemento, no document.getElementById. Por ejemplo, este código representa un div y luego, en componentDidMount, puede acceder al elemento DOM subyacente:
class Example extends React.Component { constructor(props) { super(props); this.mainDiv = React.createRef(); } componentDidMount() { console.log(this.mainDiv.current.getBoundingClientRect().width); // Possibly set state to rerender now that you know the width } render() { return ( <div ref={this.mainDiv}> Hello World </div> ); } }getElementId a veces puede ser útil si necesita obtener un elemento que está fuera del árbol de componentes de reacción, pero eso es poco común. Si está tratando de usar getElementId y no funciona, asegúrese de que exista un elemento con esa identificación. Su pregunta no mostró ningún elemento con los identificadores "raíz" o "área", así que asegúrese de que formen parte de la página.
Para acceder a las propiedades del DOM en reaccionar, hay un concepto en reaccionar llamado refs. Refs nos permite acceder directamente a los elementos dom. Por lo tanto, consulte este codeandbox para saber cómo hacerlo funcionar en COMPONENTE FUNCIONAL con useRef hook.
Consulte Esto, lo explicará con código y también verá la consola en el entorno limitado:
También esto podría explicar más teóricamente: ENLACE