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

本文详解如何在 next.js（app router + client component）中，利用 `usestate` 实现输入框失焦时校验值并动态更新子组件的 `type` prop，解决原始代码中因状态未触发重渲染导致 ui 不更新的问题。

在 React（包括 Next.js 的 Client Components）中，直接修改普通变量（如 let variable）不会触发组件重渲染，因此即使你调用了 setData("error")， 中的 variable 值虽在内存中改变，但 JSX 并不会重新执行，UI 保持静止——这正是原代码无法动态更新图标的根本原因。

正确做法是使用 React 的状态 Hook：useState。它不仅保存数据，更关键的是：每次调用 setState（如 setVariable()）都会触发组件重新渲染，并将最新状态注入 JSX，从而实现真正的响应式更新。

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

VidAU

VidAU AI 是一款AI驱动的数字人视频创作平台，旨在简化视频内容创作流程

下载

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

const InputFragment = (props) => {
  // ✅ 使用 useState 管理可响应的状态
  const [variable, setVariable] = useState("");

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

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

  return (
    

      
        {props.labelName}
         checkVal(e.target.value)}
        />
      
      {/* ✅ 直接传入 Icn 组件，无需手动传 type prop */}
      
      

    
  );
};

export default InputFragment;

关键改进说明：

• 状态驱动渲染：variable 是受控状态，setVariable() 调用后组件自动重绘，图标随之切换；
• 移除副作用 DOM 查询：原代码中 document.getElementsByTagName("input")[0].value 依赖全局 DOM，易出错且难以维护；改用 e.target.value 更安全、符合 React 数据流规范；
• 简化子组件逻辑：Icn 不再接收 type prop，而是直接闭包访问 variable，减少冗余传递，提升可读性；
• 健壮性增强：添加 return null 处理非 error 场景，避免潜在渲染异常。

⚠️ 注意：alert() 在 Icn 中仅用于调试，生产环境请移除，以免阻塞交互。

通过这一模式，你不仅能解决 type prop 动态更新问题，更建立起 React 核心范式意识：状态变更 → 触发重渲染 → UI 同步更新。这是构建可维护、可预测前端应用的基石。