Estoy usando un npm llamado react-zoom-pan-pinch que tiene múltiples funciones como accesorios. pero quiero llamar a algunos de ellos fuera del componente. ¿Cómo puedo llamar a las funciones de los componentes en mi propia función?
const handleShiftClick = () => { if (event.shiftKey) { zoomOut();// component function } }; return ( <div className="App"> <TransformWrapper initialScale={1}> // functions {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <> <div className="tools"> <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}> <button onClick={() => zoomIn()}>+ key</button> </Hotkeys> </div> <TransformComponent></TransformComponent> </> )} </TransformWrapper> </div> );const transformRef = useRef(null); const handleShiftClick = () => { if (event.shiftKey) { transformRef.current?.zoomOut();// component function } }; return ( <div className="App"> <TransformWrapper initialScale={1} ref={transformRef}> {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <> <div className="tools"> <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={() => zoomIn()}> <button onClick={() => zoomIn()}>+ key</button> </Hotkeys> </div> <TransformComponent></TransformComponent> </> )} </TransformWrapper> </div> )Compatibilidad con TransformWrapper forwardRef
Puede pasarlos a una función externa.
const manageKeyPress = (funcs) => { return (event) => { const {zoomIn, zoomOut, resetTransform} = funcs; if(event.shiftKey) { zoomOut(); } } }; return ( <div className="App"> <TransformWrapper initialScale={1}> // functions {({ zoomIn, zoomOut, resetTransform, ...rest }) => ( <> <div className="tools"> <Hotkeys keyName={keys.ZOOM_IN} onKeyDown={manageKeyPress({zoomIn, zoomOut, resetTransform})}> <button onClick={() => zoomIn()}>+ key</button> </Hotkeys> </div> <TransformComponent></TransformComponent> </> )} </TransformWrapper> </div> );