掌握 React 中的 useImperativeHandle（使用 TypeScript）

PHP中文网 • 2025年3月7日 12:45:01 • 编程技术 • 阅读 2

使用 typescript 构建 react 应用程序时，开发人员经常遇到需要创建具有高级功能的自定义、可重用组件的场景。本文将探讨两个强大的概念：用于对引用管理进行细粒度控制的 useimperativehandle 挂钩，以及创建表单验证和模态组件等自定义组件。

我们将深入探讨：

useimperativehandle 钩子：它的作用、何时使用它以及它如何允许您自定义父组件可以访问的 ref 值。创建表单验证组件：使用 typescript 构建可重用组件进行表单验证的实际示例。实现模态组件：另一个示例展示如何使用 typescript 创建交互式且可重用的模态。

这些示例将帮助初学者了解如何利用 typescript 构建交互式和可重用的组件，同时探索引用管理等高级概念。读完本文后，您将为在 react 应用程序中创建强大的自定义组件奠定坚实的基础。

什么是 useimperativehandle？

useimperativehandle 是 react 中的一个钩子，允许您自定义父组件可以访问的 ref 对象。当您想要向父组件公开自定义 api，而不是公开组件的内部实现细节时，这非常有用。

何时以及为何应该使用它

在大多数情况下，useref 提供了足够的功能来访问 dom 元素或组件实例。但是，当您需要更多控制时，useimperativehandle 就会介入，提供一种仅向父组件公开您选择的方法或状态的方法。这可以确保您的组件保持模块化、封装性并且更易于维护。该钩子还允许更好的抽象，这意味着您可以在应用程序中以最少的重复重复使用组件。

示例 1 – 拨动开关组件

此示例演示了如何使用 typescript 创建切换开关组件。组件使用 useimperativehandle 向父组件公开自定义 api，允许父组件控制开关状态。

用例：创建可由父组件控制的自定义切换开关组件。实施：定义组件并使用 useimperativehandle 公开自定义 api。在父组件中创建一个 ref 并将其传递给 toggleswitch 组件。使用ref调用自定义api并控制开关状态。

import react, { forwardref, `useimperativehandle`, usestate } from "react";interface toggleref {  toggle: () => void;  getstate: () => boolean;}type toggleswitchprops = {  initialstate?: boolean;};const toggleswitch = forwardref((props, ref) => {  const [istoggled, setistoggled] = usestate(props.initialstate ?? false);  `useimperativehandle`(ref, () => ({    toggle: () => setistoggled(!istoggled),    getstate: () => istoggled,  }));  return (     setistoggled(!istoggled)}      classname="flex items-center justify-start w-12 h-6 p-1 overflow-hidden bg-gray-300 rounded-full"      animate={{        backgroundcolor: istoggled ? "#4caf50" : "#f44336",      }}      transition={{ duration: 0.3 }}    >            );});function example() {  const toggleref = useref(null);  return (                                
    
  );}

登录后复制

示例 2 – 手风琴组件

此示例演示了如何使用 typescript 创建手风琴组件。该组件使用 useimperativehandle 向父组件公开自定义 api，允许父组件控制折叠状态。

用例：创建可由父组件控制的自定义手风琴组件。实施：定义组件并使用 useimperativehandle 公开自定义 api。在父组件中创建一个 ref 并将其传递给 accordion 组件。使用ref调用自定义api并控制accordion状态。

interface AccordionRef {  expand: () => void;  collapse: () => void;  isExpanded: () => boolean;  toggle: () => void;}type AccordionProps = {  initialState?: boolean;  title: string;  content: ReactNode;};const Accordion = forwardRef((props, ref) => {  const [expanded, setExpanded] = useState(props.initialState ?? false);  `useImperativeHandle`(ref, () => ({    expand: () => setExpanded(true),    collapse: () => setExpanded(false),    isExpanded: () => expanded,    toggle: () => setExpanded((prev) => !prev),  }));  const handleToggle = () => {    setExpanded((prev) => !prev);  };  return (                  {props.title}                    {expanded && (                      {props.content}
                  )}          
  );});function Example() {  const accordionRef = useRef(null);  return (                        
                      
  );}

登录后复制