如何在 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，从而实现真正的响应式更新。

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

"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 同步更新。这是构建可维护、可预测前端应用的基石。