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

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

我已经尝试了几个小时，但无法正常工作，请在这里帮助我。

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

// 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 个组件之间正确流动，我想获得有关如何实现此逻辑的帮助。

提前致谢！

解决方法

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

// 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>
    )
}