使用无状态功能时无法执行prop功能onClick

Question

我似乎无法让我的模式按钮运行传递给它的函数。

我想念什么吗？

Dashboard.js

const Dashboard = () => {

    let show = false;

    const showModal = () => {
        console.log('showing modal');
    };

    const hideModal = () => {
        console.log('closing modal');
    };

    return (
        <div>
            <h1>This is the dashboard</h1>
            <button type="button" onClick={showModal}>Open</button>
            <Modal handleClose={hideModal} show={show}/>
        </div>
    )
};

export default Dashboard;

Modal.js

const Modal = (handleClose, show, children) => {
    const showHideClass = show ? 'show-modal' : 'hide-modal';

    return (
        <div className={showHideClass}>
            <h1>This is my modal!</h1>
            <p>{children}</p>
            <button onClick={handleClose}>Close</button>
        </div>
    );
};

export default Modal;

我收到警告：Expected 'onClick' listener to be a function, instead got a value of 'object' type.，所以我将modal.js中的onClick更改为() => handleClose，从而消除了该警告，但是当我单击按钮时什么也没发生...

Answer 1

您遇到的问题是您没有破坏传入的props对象。

const Modal = (handleClose, show, children) => {

相反，应该在参数周围加上花括号

const Modal = ({handleClose, show, children}) => {
```