React嵌套组件内表单无法输入，以函数调用正常，求原因

问题核心原因 #

你把内部定义的RenderForms用<RenderForms />的方式调用时，React会将其视为独立的函数组件。但这个函数是在Wtf组件内部定义的——每次Wtf因为状态更新重新渲染时，RenderForms都会被重新创建，React会判定这是一个全新的组件类型，于是卸载旧的组件实例、重新挂载新的。

这种情况下，每次输入触发setQuery更新状态后，Wtf重新渲染，RenderForms被重建，新挂载的组件会使用初始的query值（空字符串），输入框内容被强制重置，看起来就像“无法输入”。

而直接调用RenderForms()时，它只是个普通函数，返回的JSX属于Wtf组件的一部分，不会创建独立的组件实例，状态更新时整个Wtf组件重新渲染，输入框能正确读取更新后的query值，所以功能正常。

两种解决办法 #

1. 直接调用函数而非组件
   把组件调用改为函数执行：

   import { useState } from "react";
   
   export default function Wtf(props:any){
       const [ query, setQuery ] = useState('')
       
       function RenderForms(){
           return(
           <>
           <button type="submit" >Search</button>
           <input onChange={(e)=>setQuery(e.target.value)} value={query} />
           </> 
           )
       }
   
       return RenderForms(); // 改为函数调用
   }
   

2. 将内部函数转为独立组件并传递props
   如果需要保留组件调用的方式，把RenderForms移到Wtf外部，将状态作为props传递进去：

   import { useState } from "react";
   
   // 独立定义组件
   function RenderForms({ query, setQuery }) {
       return(
           <>
           <button type="submit" >Search</button>
           <input onChange={(e)=>setQuery(e.target.value)} value={query} />
           </> 
       )
   }
   
   export default function Wtf(props:any){
       const [ query, setQuery ] = useState('')
       
       return <RenderForms query={query} setQuery={setQuery} />;
   }
   

内容的提问来源于stack exchange，提问作者Raven