React v18 动态数据渲染后滚动到指定位置 - 使用 useEffect 和 ref

在 React v18 中，可以使用 `useEffect` 钩子和 `ref` 来实现在动态数据渲染完成后滑动到某个数据位置。\n\n首先，你需要在你的组件中创建一个 `ref`，用来引用需要滚动到的目标元素。然后，在 `useEffect` 钩子中，监听数据的变化，当数据发生变化时，获取目标元素的位置信息，并使用 `scrollIntoView` 方法滚动到目标元素的位置。\n\n下面是一个示例代码：\n\njsx\nimport React, { useEffect, useRef } from 'react';\n\nconst MyComponent = ({ data, scrollToIndex }) => {\n const targetRef = useRef(null);\n\n useEffect(() => {\n if (targetRef.current) {\n targetRef.current.scrollIntoView({ behavior: 'smooth' });\n }\n }, [scrollToIndex]);\n\n return (\n <div>\n {data.map((item, index) => (\n <div key={index} ref={index === scrollToIndex ? targetRef : null}>\n {item}\n </div>\n ))}\n </div>\n );\n};\n\nexport default MyComponent;\n\n\n在上面的示例中，`data` 是动态渲染的数据数组，`scrollToIndex` 是需要滚动到的目标数据的索引。\n\n在 `data.map` 的循环中，我们为目标元素设置了一个 `ref`，如果当前索引是需要滚动到的索引 `scrollToIndex`，我们将 `targetRef` 赋值给它。\n\n然后，在 `useEffect` 钩子中，我们监听 `scrollToIndex` 的变化，当它发生变化时，获取目标元素的位置信息，并使用 `scrollIntoView` 方法滚动到目标元素的位置。\n\n请注意，上述代码使用了 `behavior: 'smooth'` 参数来实现平滑滚动效果，如果你需要更直接的滚动效果，可以将该参数移除。\n\n希望这个示例能帮助到你！