当前位置：首页 > article >正文

【useImperativeHandle Hook】通过子组件暴露相应的属性和方法，实现在父组件中访问子组件的属性和方法

article 2025/1/21 12:06:29

文章目录

- - 引言
  - 项目结构
  - 创建自定义输入框组件
  - - MyInput.tsx
  - 父组件中使用自定义输入框组件
  - - MyInputParent.tsx
  - 应用入口
  - - App.tsx
  - 解释与总结
  - - `useImperativeHandle` 的作用
    - 示例中的具体实现
    - 注意事项

引言

在 React 中，useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。它允许你更细粒度地控制哪些方法和属性可以通过 ref 暴露给父组件。本文将通过一个具体的例子——实现一个可被父组件控制的输入框组件，来详细介绍如何使用 useImperativeHandle。

项目结构

我们的项目结构如下：

src/
├── App.tsx
└── components/
    └── useImperativeHandle/
        ├── MyInput.tsx
        └── MyInputParent.tsx

创建自定义输入框组件

MyInput.tsx

// src/components/useImperativeHandle/MyInput.tsx
import { forwardRef, useImperativeHandle, useRef } from 'react';

type ChildRef = {
  focus: () => void;
  scrollIntoView: () => void;
};

export default forwardRef<ChildRef>(function MyInput(props, ref) {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    scrollIntoView: () => inputRef.current?.scrollIntoView(),
  }), []);

  return <input type="text" {...props} ref={inputRef} />;
});

在这个文件中，我们创建了一个名为 MyInput 的自定义输入框组件，并使用 forwardRef 和 useImperativeHandle 来暴露两个方法：focus 和 scrollIntoView。这些方法可以被父组件调用以控制输入框的行为。

父组件中使用自定义输入框组件

MyInputParent.tsx

// src/components/useImperativeHandle/MyInputParent.tsx
import { useRef } from 'react';
import MyInput from './MyInput';

type ChildRef = {
  focus: () => void;
  scrollIntoView: () => void;
};

export default function MyInputParent() {
  const inputRef = useRef<ChildRef>(null);

  const handleSubmit = () => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.scrollIntoView();
    }
  };

  return (
    <div>
      <h1>MyInput父组件</h1>
      <MyInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>编辑</button>
      <div style={{ height: '100vh' }}></div>
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

在这个文件中，我们创建了一个名为 MyInputParent 的父组件，并通过 useRef 获取对子组件 MyInput 的引用。通过点击按钮，父组件可以调用子组件暴露的方法来控制输入框的行为。

应用入口

最后，在 App.tsx 中引入 MyInputParent 组件，作为应用的入口。

App.tsx

// src/App.tsx
import MyInputParent from "./components/useImperativeHandle/MyInputParent";

function App() {
  return <MyInputParent />;
}

export default App;

解释与总结

`useImperativeHandle` 的作用

控制暴露给父组件的 API：useImperativeHandle 允许你自定义通过 ref 暴露给父组件的实例值。你可以选择性地暴露某些方法或属性，而隐藏其他内部实现细节。
避免过度暴露：通过 useImperativeHandle，你可以确保只暴露必要的接口，避免不必要的复杂性和潜在的安全问题。

示例中的具体实现

MyInput.tsx：我们定义了一个自定义输入框组件，并通过 useImperativeHandle 暴露了 focus 和 scrollIntoView 方法。
MyInputParent.tsx：父组件通过 useRef 获取对子组件的引用，并调用子组件暴露的方法来控制输入框的行为。