javascript - React - 如何使用子组件，使用函数结构（不是类）设置我的父状态

我正在尝试通过将函数“setName”传递给子组件来使用子组件中的按钮更改父组件的状态。我阅读了很多示例，但它们似乎都使用类，我试图在其中使用函数，因为钩子上的 React 文档似乎在类上提升函数。

在我的父母中，我有

  let [Name, setName] = useState("John Doe");

我在 return 语句中使用 JSX 传递 setName 方法：

<Child childSetName=({setName})/>

在我的子组件中，我有

export const Child = ({childSetName}) => {

return(
    <a onDoubleClick={()=>{childSetName("Mary Ann")}}>
        Click me
    </a>
)}

我得到一个 typeError: childSetNameis not a function。

我也读过这个流行的问题，但它使用类，而不是 React 文档中所有钩子示例的函数。

如何使用子组件设置我的父状态，两者都保留它们的功能结构而不是类。

标签： javascriptreactjsecmascript-6jsxtypeerror

我认为你在这里有错误的语法

<Child childSetName=({setName})/>

应该这样改

<Child childSetName={setName}/>

和

export const Child = ({childSetName}) => {

return(
    <a onClick={()=>{childSetName("Mary Ann")}}>
        Click me
    </a>
)}