在react应用程序中加载图像后滚动至ID

import React, { useEffect, useRef } from 'react';

const ImageScroll = () => {
  const imageRef = useRef(null);

  useEffect(() => {
    // 在图像加载完成后滚动至指定ID
    const handleImageLoad = () => {
      const targetElement = document.getElementById('scrollToId');
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    };

    // 监听图像加载完成事件
    imageRef.current.addEventListener('load', handleImageLoad);

    // 清除事件监听器
    return () => {
      imageRef.current.removeEventListener('load', handleImageLoad);
    };
  }, []);

  return (
    <div>
      <img ref={imageRef} src="path/to/image.jpg" alt="Image" />
      {/* 其他内容 */}
      <div id="scrollToId">滚动至此ID</div>
    </div>
  );
};

export default ImageScroll;

import React from 'react';
import ImageScroll from './ImageScroll';

const App = () => {
  return (
    <div>
      {/* 其他内容 */}
      <ImageScroll />
    </div>
  );
};

export default App;