在React中从子组件向父组件传递props

Question

return
 <div>
    <RadioOptions />
    <GenButton />
    <OutputPass />
 </div>

我最近在处理我的副业项目时，发现了代码中的一个问题。在inRadiooptions中，我使用了一些useState hooks，并且我想将该状态从Radiooptions组件传递到其父组件（passGen），然后再从那里将该状态传递给Get Button组件以检查某些条件，如果没有问题，则生成密码。（我还会附上我的GitHub存储库，以便更好地访问我的源代码）

https://github.com/arviinmo/palora/tree/main/components/passwordgenerator

- Arvinmo

Answer 1

在React中，你不能从子组件向父组件传递props，这是单向的（只能从父组件到子组件）。

因此，你应该采取以下两种解决方案之一：

• 将状态(state)放在父组件中，通过将setter函数作为props传递给子组件来操作它
• 使用Redux Toolkit等工具创建全局状态，并使所有组件都可以访问

- Aymendps

---

谢谢你的回答。你可以给我展示一下怎么做吗？ - Arvinmo

基本上，前往passGen组件，在那里声明你需要的useState，而不是在RadioOptions中声明它。然后像这样将状态传递给RadioOptions：<RadioOptions state={state} setState={setState} /> 然后在RadioOptions内部相应地使用它们来更改状态的值。为此，您应该添加关键字props：function RadioOptions(props)，然后可以通过执行props.state和props.setState来访问state和setState。 - Aymendps

我更新了项目，但它仍然无法工作。你能否检查一下并告诉我为什么它不能工作？ - Arvinmo

你应该将onChange事件放在复选框输入上，而不是标签上。 - Aymendps

Answer 2

对于新手来说，请按照以下步骤操作：

父组件：

import Child from './Child';
export default function Parent() {
        const data_from_child = (data) => {
        console.log(data); // or set the data to a state
    }

    return (
        <Child setter={data_from_child} /> //pass the function to the child
    )
}

子组件：

export default function Child ({setter}) {
    setter('Data from Child');
    return (<></>)
}

- nourhomsi