将子状态传递给父级以打开和关闭菜单组件

Question

我已经尝试了几个小时了，但还是无法正常工作，请帮帮我。

我不明白我的代码有什么问题...下面是一个示例

// Parent component
export default (props) => {
    const [status, setStatus] = useState(false)

    const handleChildStatus = (childStatus) => {
        console.log(childStatus)
        setStatus(childStatus)
    }

    return (
        <header>
            <Menu
                childstatus={handleChildStatus}
                status={status}
                className={
                    status ? 'menu-wrapper show-menu' : 'menu-wrapper hide-menu'
                }
            />
            <div className="open-menu" onClick={() => setStatus(true)}></div>
        </header>
    )
}

// Menu component
export default (props) => {
    const [status, setStatus] = useState(false)
    return (
        <div
            childstatus={props.childstatus(status)}
            className={props.className}
        >
            <div onClick={() => setStatus(false)}>
                <img src={CloseMenu} alt="close-menu" />
            </div>
        </div>
    )
}

所以我想使用下面的代码打开和关闭 Menu component。

在 parent 中有一个打开它的菜单按钮，在 Menu component 中有一个关闭它的按钮。 state 在 2 个组件之间没有正确流动，我想获得一些关于如何实现此逻辑的帮助。

提前致谢！

Answer 1

不需要在子组件中维护状态，您可以从父组件的状态变量中处理它，如下所示：

// Menu component
export default (props) => {
    return (
        <div
            className={props.className}
        >
            <div onClick={() => props.childstatus(false)}> // on click call parent's handleChildStatus function so in next render it will give hide class
                <img src={CloseMenu} alt="close-menu" />
            </div>
        </div>
    )
}

将子状态传递给父级以打开和关闭菜单组件

Pass child state to parent to open and close menu component

reactjs

react-props

react-hooks

react-state