Quiero comenzar diciéndoles que soy nuevo en reaccionar y vengo de trabajar casi en su totalidad con Vanilla JS y HTML. Quiero saber cómo hacer referencia/pasar un elemento como argumento en una función similar a cómo lo haría en JS:

 const myElement = document.getElementById("my-element");

o

 const myElement = document.createElement("div"); function testFunc(element) { return element.getBoundingClientRect(); } testFunc(myElement);

Busqué un poco en Google pero no encontré ninguna buena respuesta, todo lo que pude encontrar fue sobre "ref", pero estoy seguro de que hay una solución más simple.

Esto es lo que tengo en React ahora:

 import React from "react"; import "./myComp.css"; function myComp(props) { const sliderContainer = ( <div className="slider-container" style={props.styles}></div> ); function myFunc(element) { return element.getBoundingClientRect(); } const elementDimensions = myFunc(sliderContainer); return { sliderContainer }; } export default myComp;

Pero lo que quiero hacer es:

 import React from "react"; import "./myComp.css"; function myComp(props) { const sliderContainer = "slider-container" //SOME SORT OF REFRENCE / SELECTOR, I'VE FIGURED OUT THAT querySelectors IS NOT THE RIGHT APPORACH function myFunc(element) { return element.getBoundingClientRect(); } const elementDimensions = myFunc(sliderContainer); return ( <div className="slider-container" style={props.styles}> <div className="myChild"></div> </div> ); } export default myComp;