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

在 React 中掌握 useImperativeHandle（使用 TypeScript）

article 2024/11/15 19:40:06

当使用 TypeScript 构建 React 应用程序时，开发人员经常遇到需要创建具有高级功能的自定义、可重用组件的情况。本文将探讨两个强大的概念：使用 ImperativeHandle 钩子对 ref 管理进行细粒度控制；以及创建自定义组件，如表单验证和Modal组件。

我们将深入研究：useImperativeHandle 钩子：它做什么，何时使用它，以及它如何允许你自定义父组件可以访问的 ref 值。

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

什么是 `useImperativeHandle`？

useImperativeHandle 是 React 中的一个钩子，它允许你自定义父组件可以访问的 ref 对象。当您想要向父组件公开自定义 API，而不是公开组件的内部实现详细信息时，这非常有用。

何时以及为何应该使用它

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

示例 1 - 切换开关组件

此示例演示如何使用 TypeScript 创建切换开关组件。该组件使用 useImperativeHandle 向父组件公开自定义 API，从而允许父组件控制开关状态。

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

import React, { forwardRef, useImperativeHandle, useState } from "react";

interface ToggleRef {
  toggle: () => void;
  getState: () => boolean;
}

type ToggleSwitchProps = {
  initialState?: boolean;
};

const ToggleSwitch = forwardRef<ToggleRef, ToggleSwitchProps>((props, ref) => {
  const [isToggled, setIsToggled] = useState(props.initialState ?? false);

  useImperativeHandle(ref, () => ({
    toggle: () => setIsToggled(!isToggled),
    getState: () => isToggled,
  }));

  return (
    <motion.button
      onClick={() => 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 }}
    >
      <motion.div
        className="flex items-center justify-center w-5 h-5 bg-white rounded-full"
        animate={{
          x: isToggled ? "100%" : "0%",
        }}
        transition={{ type: "spring", stiffness: 700, damping: 100 }}
      ></motion.div>
    </motion.button>
  );
});

function Example() {
  const toggleRef = useRef<ToggleRef>(null);

  return (
    <div className="flex flex-col items-center justify-center h-screen gap-4">
      <section className="flex flex-row items-center justify-center w-full py-4 border border-gray-200 rounded-md gap-x-4">
        <ToggleSwitch ref={toggleRef} />
        <button
          onClick={() => toggleRef.current?.toggle()}
          className="px-4 py-2 text-white bg-blue-500 rounded-md"
        >
          Toggle Switch
        </button>
      </section>
    </div>
  );
}

示例 2 - 折叠组件

此示例演示如何使用 TypeScript 创建折叠组件。该组件使用 useImperativeHandle 向父组件公开自定义 API，从而允许父组件控制折叠面板状态。

用例：创建可由父组件控制的自定义折叠组件。
在父组件中创建一个 ref 并将其传递给 Accordion 组件。
使用 ref 调用自定义 API 并控制折叠面板状态。

interface AccordionRef {
  expand: () => void;
  collapse: () => void;
  isExpanded: () => boolean;
  toggle: () => void;
}

type AccordionProps = {
  initialState?: boolean;
  title: string;
  content: ReactNode;
};

const Accordion = forwardRef<AccordionRef, AccordionProps>((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 (
    <div className="overflow-hidden border border-gray-200 rounded-md w-ful">
      <motion.button
        className="w-full px-4 py-2 text-left bg-gray-100 hover:bg-gray-200"
        onClick={handleToggle}
        initial={false}
        animate={{ backgroundColor: expanded ? "#e5e7eb" : "#f3f4f6" }}
      >
        {props.title}
      </motion.button>
      <AnimatePresence initial={false}>
        {expanded && (
          <motion.div
            initial="collapsed"
            animate="expanded"
            exit="collapsed"
            variants={{
              expanded: { opacity: 1, height: "auto" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.3, ease: "easeInOut" }}
          >
            <div className="p-4 bg-white">{props.content}</div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
});

function Example() {
  const accordionRef = useRef<AccordionRef>(null);

  return (
    <div className="flex flex-col items-center justify-center h-screen gap-4">
      <main className="w-full px-4">
        <Accordion
          ref={accordionRef}
          title="Click to expand"
          content="This is the accordion content. It can contain any text or elements."
        />
      </main>
      <button
        onClick={() => {
          accordionRef.current?.expand();
        }}
        className="px-4 py-2 text-white bg-blue-500 rounded-md disabled:bg-gray-500"
      >
        Expand Accordion
      </button>
      <button
        onClick={() => accordionRef.current?.collapse()}
        className="px-4 py-2 text-white bg-blue-500 rounded-md"
      >
        Collapse Accordion
      </button>
      <button
        onClick={() => accordionRef.current?.toggle()}
        className="px-4 py-2 text-white bg-blue-500 rounded-md"
      >
        Toggle Accordion
      </button>
    </div>
  );
}