如何在每次父组件点击时确保 useeffect 中的代码执行
父组件中声明了 setselidx(20)，用来更新子组件的 useeffect 中的 props.scrolltoidx 属性。然而，点击 setselidx 后，useeffect 中的代码仅在 scrolltoidx 属性发生变化时才会执行。
解决这个问题的方案是：使用 ref 而不是 props。ref 允许直接调用 react 组件的方法，而不是通过 props 响应式地更新。
子组件 subcontainer.tsx：
import react, { useref, forwardref } from "react";
export interface subcontainerref {
scrollto(index: number): void;
}
export const subcontainer = forwardref(
(props, ref) => {
const scrollto = (scrolltoidx: number) => {
const container = document.queryselector("#container");
const div: htmldivelement | null = document.queryselector(
"#item-" + scrolltoidx!.tostring()
);
console.log(container, div);
if (container) {
container.scrollto({
top: div!.offsettop,
behavior: "smooth",
});
}
};
useimperativehandle(
ref,
() => ({
scrollto,
}),
[]
);
// ... 其余代码
}
); 父组件 app.tsx：
import React, { useRef } from "react";
const App = () => {
const conRef = useRef();
const btnClick = () => {
conRef.current?.scrollTo(20);
};
return (
现在，每次点击 app 中的按钮时，subcontainer 组件的方法 scrollto 都会被直接调用，无论 props.scrolltoidx 是否发生变化。这将确保 subcomponent 中的 useeffect 代码始终执行。
