父组件使子组建滚动

在使用 TypeScript 和 React 时,实现父组件控制子组件内部元素的滚动,可以使用 refuseImperativeHandle。以下是如何在 .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;

解释

  1. 子组件 (Son.tsx):

    • 使用 useRef 创建一个引用 textContainerdiv
    • 使用 useImperativeHandlescrollUp 方法暴露给父组件。
    • 定义 SonRef 接口来描述暴露的方法,以便在父组件中使用该类型。
  2. 父组件 (Father.tsx):

    • 使用 useRef 创建一个引用子组件的 ref,类型为 SonRef
    • 在点击按钮时,通过 ref 调用子组件的 scrollUp 方法,实现滚动。

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

相关推荐
程序猴老王5 分钟前
el-select 和el-tree二次封装
前端·vue.js·elementui
blzlh16 分钟前
手把手教你做网易云H5页面,进大厂后干的第一件事
前端·javascript·css
贩卖纯净水.43 分钟前
网站部署及CSS剩余模块
前端·css
Justinc.1 小时前
CSS3_BFC(十二)
前端·css·css3
梅子酱~1 小时前
Vue 学习随笔系列十七 -- 表格样式修改
javascript·vue.js·学习
刺客-Andy1 小时前
React第四节 组件的三大属性之state
前端·javascript·react.js
黄毛火烧雪下1 小时前
React 表单Form 中的 useWatch
前端·javascript·react.js
爱健身的小刘同学2 小时前
钉钉免登录接口
前端·javascript·钉钉
啵咿傲2 小时前
跨域相关的一些问题 ✅
前端
命运之光2 小时前
生日主题的烟花特效HTML,CSS,JS
前端·javascript·css