使用无状态函数时无法执行 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}) => {

简要说明

传递给功能组件的道具是单个对象，其键对应于传入的对象的名称。对象的形状将是：

{
   handleClose: [function],
   show: true,
   children: ...
}

要获取道具，您可以有一个参数（惯用地命名为 props），然后从该对象访问值：

const Hello = (props) => {
   console.log(props.message);
}

或者你可以使用解构赋值（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment）来提取函数参数中的属性：

const Hello = ({message}) => {
   console.log(message);
}

使用无状态函数时无法执行 prop 函数 onClick

Cannot perform prop function onClick when usnig stateless functions

javascript

reactjs

functional-programming

stateless