父组件使子组建滚动

珊珊而川2024-06-29 19:16

在使用 TypeScript 和 React 时，实现父组件控制子组件内部元素的滚动，可以使用 ref 和 useImperativeHandle。以下是如何在 .tsx 文件中实现这个功能的详细步骤：

子组件（Son.tsx）

tsx 复制代码

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

// 定义子组件的 ref 接口
export interface SonRef {
  scrollUp: () => void;
}

const Son = forwardRef<SonRef>((_, ref) => {
  const textContainerRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => ({
    scrollUp() {
      if (textContainerRef.current) {
        textContainerRef.current.scrollTop -= 300;
      }
    },
  }));

  return (
    <div>
      <div className="textContainer" ref={textContainerRef} style={{ overflow: 'auto', maxHeight: '400px' }}>
        {/* 示例内容，可以替换为实际内容 */}
        {Array.from({ length: 100 }, (_, i) => (
          <p key={i}>This is line {i + 1}</p>
        ))}
      </div>
    </div>
  );
});

export default Son;

父组件（Father.tsx）

tsx 复制代码

import React, { useRef } from 'react';
import Son, { SonRef } from './Son'; // 根据实际路径修改

const Father: React.FC = () => {
  const sonRef = useRef<SonRef>(null);

  const handleScrollUp = () => {
    if (sonRef.current) {
      sonRef.current.scrollUp();
    }
  };

  return (
    <div>
      <button onClick={handleScrollUp}>Scroll Up</button>
      <Son ref={sonRef} />
    </div>
  );
};

export default Father;

解释

子组件 (Son.tsx):
- 使用 useRef 创建一个引用 textContainer 的 div。
- 使用 useImperativeHandle 将 scrollUp 方法暴露给父组件。
- 定义 SonRef 接口来描述暴露的方法，以便在父组件中使用该类型。
父组件 (Father.tsx):
- 使用 useRef 创建一个引用子组件的 ref，类型为 SonRef。
- 在点击按钮时，通过 ref 调用子组件的 scrollUp 方法，实现滚动。

通过这种方式，父组件可以在不直接操作子组件 DOM 的情况下，控制子组件内部的滚动行为。使用 TypeScript 可以确保类型安全，并提供更好的开发体验。