¿Puedo acceder a la variable isroll que está dentro de useEffect? Quiero ejecutar scroll cuando se presiona el botón. pero en mi caso no funciona. Lo intenté haciendo setState y funciona, pero tengo un nuevo problema en iscroll.on() que dice "No se pueden leer las propiedades de undefined". No sé cómo resolver este problema. hay alguien que pueda ayudarme?
function Arrangement() { const ref = useRef(null); const [prevButton, setPrevButton] = useState(false); const [nextButton, setNextButton] = useState(true); useEffect(() => { const iscroll = new IScroll(ref.current, { // how to export this variable? keyBindings: true, scrollX: true, mouseWheel: true, click: true }); iscroll.on("scrollEnd", () => { if (iscroll.x === 0) { setPrevButton(false); } else { setPrevButton(true); } if (iscroll.x === iscroll.maxScrollX) { setNextButton(false); } else { setNextButton(true); } }); return () => { iscroll.destroy(); } }, []); const onPrevButtonHandler = () => { iscroll.scrollBy(220, 0, 600); // not working } const onNextButtonHandler = () => { iscroll.scrollBy(-220, 0, 600); // not working } return ( <div className={classes.Container}> <button className={clsx(classes.Button, classes.ButtonLeft, { [classes.Button__active]: prevButton })} onClick={onPrevButtonHandler} type="button" aria-label="Prev button"> <ChevronLeft /> </button> <div className={classes.Wrapper} ref={ref}> <ul> <li></li> </ul> </div> <button className={clsx(classes.Button, classes.ButtonRight, { [classes.Button__active]: nextButton })} onClick={onNextButtonHandler} type="button" aria-label="Next button"> <ChevronRight /> </button> </div> ); } export default Arrangement;Estoy abierto a cualquier sugerencia dada.
Mueva su variable iscroll a una referencia o un estado.
Por lo tanto, inícielo desde la devolución de llamada ref en sí:
function Arrangement() { const iscroll = useRef(); // OR const [iscroll, setIscroll] = useState(); return ( <div className={classes.Container}> ... <div ref={(node) => { const iscrollInstance = new IScroll(node, { keyBindings: true, scrollX: true, mouseWheel: true, click: true, }); iscroll.current = iscrollInstance; // OR setIscroll(iscrollInstance); }} > ... </div> ... </div> ); } Observe el uso de iscroll dependiendo de la referencia/estado:
iscroll.current.on("...") // if its a ref