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

问题描述

我有一个有 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

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