Tengo un componente HTML a continuación creado en REACT que no puedo editar directamente. Pero necesito agregar un atributo a uno de sus elementos HTML. No puedo usar jquery tan bien, de lo contrario es fácil hacerlo con jQuery.
A continuación se muestra el HTML base para la tabla que no puedo editar directamente, pero solo puedo usar este componente en mi código.
Desafío : necesito agregar un atributo al elemento SVG. por ejemplo -> id-datos="1". ¿Se puede hacer con CSS o de cualquier otra forma?
<TablePresenter> <div> <svg>this is a actually a sort button</svg> <div>Column 1 Name</div> </div> <div> <svg>this is a actually a sort button</svg> <div>Column 2 Name</div> </div> </TablePresenter>El archivo principal que puedo editar es el siguiente.
const MyComponent = () => { some logic here... Can we do something here may be CSS or any react hack to get underline component HTML change. return( <TablePresenter></TablePresenter> ) } export default MyComponent;No es una forma recomendada de hacerlo, pero usando una referencia puede lograrlo, un ejemplo a continuación:
Agregue un div contenedor a su componente principal (su propio componente que se puede editar) como se muestra a continuación y agregue una ref , eso lo ayudará a obtener la referencia DOM del html dentro de <TablePresenter>
const divRef= useRef<HTMLDivElement>(null); return <div ref={divRef}> <TablePresenter></TablePresenter> </div> // This is an example of getting the reference of the svg. divRef.current.firstElementChild.firstElementChild.firstElementChildPuede ser algo como esto:
const MyComponent = () => { const divRef = useRef<HTMLDivElement>(null); useEffect(()=>{ divRef.current.firstElementChild.firstElementChild.firstElementChild.attributes["data-id"]=1 }, []) return <div ref={divRef}> <TablePresenter></TablePresenter> <SuperChild /> </div> }