如何将函数传递给使用反应中的功能组件设置父组件状态的子组件？

如何解决如何将函数传递给使用反应中的功能组件设置父组件状态的子组件？

我有一个有 handleClick 功能的 BuyButton。单击按钮时，它会设置 showContainer 的状态并打开 BuyContainer 组件。我已将该函数作为道具传递给 BuyContainer 组件，并希望在单击 BuyContainer 组件中的关闭按钮时再次执行该函数，以便将 showContainer 的状态设置为 false 并将 BuyContainer 组件从DOM。我没有看到任何错误，但该函数并未从 BuyContainer 组件内执行。我该怎么做？

购买按钮组件：

import { useState } from 'react';
import './styles.scss';
import BuyContainer from './BuyContainer';

const BuyButton = (props) => {
    const [showContainer,setShowContainer] = useState(false);

    const handleClick = () => {
        return showContainer === true ? setShowContainer(false) : setShowContainer(true);
    }
    
    return (
        <div>
            <div className="buy button" onClick={handleClick}></div>
                {
                    showContainer ? <BuyContainer handleClick={handleClick} /> : null
                }
        </div>
    )
}

export default BuyButton;

BuyContainer 组件：

import './styles.scss';

const BuyContainer = (props) => {

    return (
        <div className="buy-container">
            <div className="close button" onClick={props.HandleClick}></div>
        </div>
    )
}

export default BuyContainer;

解决方法

你的代码有错别字，应该是

props.handleClick

不是props.HandleClick

https://codesandbox.io/static/img/play-code

您可以查看此代码和框以供参考