当我的 React 用作嵌套组件时，无法输入内容

Question

当我在react中调用一个包含另一个呈现表单的组件时，由于某种原因我无法在其中输入内容。当我将它视为函数而不是组件时，它就可以工作了。为什么会发生这种情况？嵌套组件是否无法访问其父级状态或其他内容？即使当我尝试将状态元素作为 props 传递下来时，我也会得到相同的行为。

https://playcode.io/1581684 ^ 可重现的代码

import React from 'react';
import Wtf from './wtf.tsx'

export function App(props) {
  return (
    <div className='App'>
      <h1>Hello. Why is does my form behave like this?</h1>
      <Wtf />
    </div>
  );
}

wtf.tsx：

import { useState } from "react";
import { Button, HStack, Input } from "@chakra-ui/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 />
      
    )

}

Answer 1

嵌套组件可能会导致错误，根据 React 的说法，这是不好的做法。

始终在顶层声明组件函数，并且不要嵌套它们的定义

我尝试按照你所说的方式将道具传递下来，看起来很有效

function RenderForms(props:any){
   return(
     <>
       <button type="submit" >Search</button>
       <input onChange={(e)=>props.setQuery(e.target.value)} value={props.query} />
     </> 
    )
}

export default function Wtf(props:any){
    const [ query, setQuery ] = useState('')

    return (
       <RenderForms query={query} setQuery={setQuery} /> 
    )   
}

https://react.dev/learn/preserving-and-resetting-state# different-components-at-the-same-position-reset-state