如何让useEffect内部的变量可以从外部访问？
如何让useEffect内部的变量可以从外部访问？
提问于 2021-09-18 01:58:08
我可以访问useEffect内部的isroll变量吗？当按钮被按下时，我想运行滚动。但在我的情况下，它不起作用。我试过做setState，但我在iscroll.on()上遇到了一个新问题，它说“无法读取未定义的属性”，我不知道如何解决这个问题。有没有人能帮我？
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;我对任何建议都持开放态度。
回答 1
Stack Overflow用户
发布于 2021-09-18 02:04:23
将iscroll变量移动到引用或状态。
因此，从ref回调本身初始化它：
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>
);
}请注意iscroll的用法取决于ref/状态：
iscroll.current.on("...") // if its a ref页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69233582
复制相关文章
相似问题
React Functional Component:如何从useEffect()外部访问变量
从内部匿名运行访问外部变量
从内部函数访问外部函数变量
从内部函数访问外部函数的变量
如何从函数外部访问函数内部定义变量
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
