useeffect([props.scrolltoidx]) 让每次都执行的办法
在react组件中使用useeffect时，通常依赖项数组（第二个参数）用于决定何时重新执行useeffect。当依赖项数组中的任何值发生变化时，useeffect会重新执行。
问题描述：
在子组件中使用useeffect来监听props.scrolltoidx的变化。如果props.scrolltoidx更新，useeffect就会执行并滚动到相应位置。但是，如果props.scrolltoidx没有更新，useeffect就不会执行。
解决办法：
为了让useeffect每次都执行，一种方法是使用命令式调用而不是响应式更新。我们可以使用react的ref来创建子组件的引用，并通过父组件调用子组件的方法。
具体实现：
在子组件中：
import { forwardref, useimperativehandle, useref } from 'react';const subcontainer = forwardref((props, ref) => { const scrollto = (scrolltoidx) => { const container = document.queryselector('#container'); const div = document.queryselector('#item-' + scrolltoidx.tostring()); container.scrollto({ top: div.offsettop, behavior: 'smooth', }); }; useimperativehandle(ref, () => ({ scrollto, }), []); return /* ... component code */});
登录后复制
在父组件中：
import { useRef } from 'react';const ParentComponent = () => { const conRef = useRef(); const btnClick = () => { conRef.current.scrollTo(20); }; return ( );};
登录后复制
通过使用ref，父组件可以访问子组件的scrollto方法，并将其作为命令进行调用。这使得useeffect可以绕过依赖项数组而每次都执行。
以上就是React中如何让useEffect在每次渲染时都执行？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2649936.html
