Tengo un componente personalizado usando forwardRef() y lo uso varias veces
como esto:
const CustomComp = React.forwardRef(({props...},{ref1,ref2})=>{...}); //this is in another file const CombinedRef={ref1:useRef(),ref2:useRef()}; <CustomComp ref={CombinedRef}/> //case 1 <CustomComp/> //case 2 pero hay ocasiones en las que el componente personalizado no necesita una ref como en el segundo caso
pero si no paso la ref en el caso 2 da error
nulo no es un objeto
hasta ahora mi única solución ha sido <CustomComp ref={{}}/> //case 2
pero, ¿hay alguna manera en la que no tenga que pasar la referencia en el caso 2?
No puede desestructurar sus árbitros directamente si debería ser un accesorio opcional. Así que en breve hice una caja de arena para mostrar que... Lo que intentas ahora es esto:
const CustomComp = forwardRef((props, { ref1, ref2 }) => { console.log("ref1", ref1); console.log("ref2", ref2); return ( <div {...props}> <span>CustomComp</span> </div> ); });Cuando intentas renderizar eso así:
export default function App() { const ref1 = useRef(); const ref2 = useRef(); return ( <div className="App"> <CustomComp ref={{ ref1, ref2 }} /> <CustomComp /> </div> ); } Obtiene el error TypeError: Cannot destructure property 'ref1' of 'object null' as it is null.
Pero si lo cambias a esto:
const CustomComp = forwardRef((props, ref) => { const { ref1, ref2 } = ref ? ref : {}; console.log("ref1", ref1); console.log("ref2", ref2); return ( <div {...props}> <span>CustomComp</span> </div> ); });Entonces empieza a funcionar ;-)
Aquí está la caja de arena: https://codesandbox.io/s/agitated-worker-pqjn3?file=/src/App.js:68-296