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

Question

我正在尝试使用我的 child 组件中的按钮更改 parent 组件的状态，方法是将函数“setName”传递给 child。我读了很多例子，但他们似乎都使用了 classes，我正在尝试使用函数，因为钩子上的 React 文档似乎在 class.

上提升函数

在我的parent中，我有

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

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

<Child childSetName=({setName})/>

在我的 child 组件中我有

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

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

我收到类型错误：childSetName 不是一个函数。

我也读过，但它使用 class，而不像 React 文档中的所有钩子示例那样起作用。

如何使用 child 组件设置我的 parent 状态，两者都保留其功能结构而不是 classes。

Answer 1

我认为你的语法有误

<Child childSetName=({setName})/>

应该这样改

<Child childSetName={setName}/>

和

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

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

React - How can I set my parent state using child component, using function structures (not classes)