Estoy intentando conectar mi componente personalizado a una referencia usando useRef de react para usar html2canvas y representar el elemento en un lienzo.
const dataLetters = { headers: [ 'A', 'B', 'C', 'D', 'E', 'F', 'G' ], rows: [ ['A', 'B', 'C', 'D', 'E', 'F', 'G'], ] }; export default function LettersPage() { // refs const LettersTableRef = useRef(null); useEffect(() => { console.log('letter ref'); console.log(LettersTableRef.current); // same result when logging LettersTableRef }, [LettersTableRef]); return ( <Page> <CustomizedTable ref={LettersTableRef} data={dataLetters } /> </Page> ); }Sin embargo, este código cuando lo ejecuto, la consola registra un valor nulo después de registrar "ref de letra". La tabla personalizada simplemente toma los datos y crea filas y un encabezado con la información, nada más sofisticado.
Soy nuevo en React y javascript. He leído que puedo en javascript dar una identificación a un elemento. No sé cómo hacerlo en un contexto de reacción, y estoy tratando de apegarme a la práctica de usar React dentro de React en lugar de js simple.
Por favor, hágame saber lo que estoy haciendo mal!
-----Actualizado para agregar el código para CustomizeTable----
import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; export default function CustomizedTables({ data, id }) { return ( <TableContainer> <Table> <TableHead> <TableRow> {data.headers.map((header) => ( <TableCell>{header}</TableCell> ))} </TableRow> </TableHead> <TableBody> {data.rows.map((row) => ( <TableRow> {row.map((datum) => ( <TableCell>{datum}</TableCell> ))} </TableRow> ))} </TableBody> </Table> </TableContainer> ); }Debe verificar nuevamente en la consola de su navegador. Debe haber algunos errores con respecto a la ref y each child in a list should have a unique key...
El uso de refs es un tema avanzado en React y básicamente obtienes un puntero a un objeto. Esto funcionará con referencias a componentes de clase o elementos HTML, pero no funciona directamente con componentes de funciones. Para esto, debe usar forwardRef para envolver su componente de función dentro.
He arreglado su código aquí: https://codesandbox.io/s/vigorous-dew-u2bm9?file=/src/CustomizedTable.jsx
Con forwardRef puede establecer la referencia a cualquier elemento secundario para que el componente externo pueda acceder directamente a él con useRef . Hay otras formas de obtener métodos como referencia con useImperativeHandle pero esto será aún más avanzado.
const CustomizedTables = forwardRef(({ data, id }, ref) => ( <TableContainer ref={ref}> .... </TableContainer> ));Puedo recomendar encarecidamente la documentación oficial sobre este tema: https://reactjs.org/docs/hooks-reference.html