如何在 Next.js 中通过函数动态更新子组件的 prop 值

本文讲解如何在 next.js 函数组件中，利用 react 的 `usestate` hook 实现输入框失焦时校验值并动态更新子组件的 prop（如 `type`），解决因变量未触发重渲染导致 ui 不更新的问题。

在 Next.js（尤其是 App Router）中使用客户端组件时，直接修改普通 JavaScript 变量（如 let variable）不会触发组件重渲染，因此即使你更新了 variable，子组件 也不会响应式地重新渲染——这正是原代码中“动态更新不工作”的根本原因。

正确做法是使用 React 的状态管理机制：useState。它不仅能保存值，更重要的是，调用其 setter 函数（如 setVariable()）会主动触发组件及其子树的重新渲染，确保 UI 与数据保持同步。

以下是优化后的完整实现：

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

下载

"use client";
import { useState } from "react";
import { Icon } from "@iconify/react";
import "./_input-fragment.scss";

const InputFragment = (props) => {
  // ✅ 使用 useState 管理动态类型状态
  const [type, setType] = useState("");

  const checkVal = (value: string) => {
    // 若输入为空（或 falsy），设为 "error"；否则清空状态（可设为 "success" 等）
    setType(value ? "" : "error");
  };

  // ✅ 子组件 Icn 改为无参函数组件，直接读取闭包中的 type 状态
  const Icn = () => {
    if (type === "error") {
      return (
        
      );
    }
    return null; // 避免 undefined 渲染
  };

  return (
    

      
        {props.labelName}
         checkVal(e.target.value)}
        />
      
       {/* ✅ 此处无需传参，type 已在闭包中可用 */}
      

    
  );
};

export default InputFragment;

关键改进说明：

• 状态驱动渲染：type 是响应式状态，setType() 调用后组件自动重绘，子组件 Icn 也随之更新；
• 避免 DOM 查询：原代码中 document.getElementsByTagName("input")[0].value 依赖全局 DOM 状态，易出错且不可控；改为通过 e.target.value 直接获取事件源值，语义清晰、性能更好；
• 子组件精简设计：Icn 不再接收 props.type，而是直接访问父作用域的 type 状态，减少冗余 props 传递，提升可维护性；
• 类型安全增强：为 useState 添加 string 类型注解，并对 checkVal 参数做类型提示（TypeScript 友好）；
• 边界处理：Icn 在非 "error" 情况下显式返回 null，避免潜在的 undefined 渲染异常。

⚠️ 注意：若需支持更多状态类型（如 "success"、"warning"），可扩展 type 的联合类型，例如 useState("")，并在 checkVal 和 Icn 中补充对应逻辑。

通过以上改造，即可实现输入校验 → 状态更新 → 图标动态切换的完整响应式流程，符合 React 最佳实践。