时间戳

首页 > 解决方案 > 当我将它传递给功能组件时，为什么我的道具在最初存在后不再存在？

javascript - 当我将它传递给功能组件时，为什么我的道具在最初存在后不再存在？

问题描述

这是我传递 onClick 道具的函数（setShowModal 是 setState() 来自 useState 钩子）：

<MyFunctionalComponent
  onClick={() => setShowModal(true)}
  ...other props here
/>

这是接收道具的功能组件：

export const MyFunctionalComponent = ({ onClick }) => {
  return (
   <section>
     ...other code here
     {onClick && (<Button>{ctaText}</Button>)}
   </section>
  );
};

但是 Button 组件永远不会出现，因为属性 onClick 是未定义的。当我 console.log 功能组件内的道具时，它最初在控制台中打印该功能，但随后又打印了两次未定义。有人可以解释为什么会这样吗？我通过传播 ...props 来实现它。但是console.log 保持不变？我不明白为什么。这是我关于 Stack Overflow 的第一个问题，所以请随时给我反馈如何提出更好的问题 :)

标签： javascriptreactjsreact-props

解决方案

你不能通过 onClick，onClick 只是一个事件监听器。你应该通过状态

<MyFunctionalComponent onClick={() => setShowModal(!showModal)}
      showModal={showModal}
      ...other props here />
/>


export const MyFunctionalComponent = ({ showModal }) => {
    return (
        <section>
            ...other code here
            {showModal && (<Button>{ctaText}</Button>)}
        </section>
   );
};

我相信这应该有效。让我知道这是否是您想要的。

推荐阅读