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

Question

这是 function 我正在传递 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 组件永远不会出现，因为 prop onClick 是未定义的。 当我 console.log 功能组件内的道具时，它最初在控制台中打印 function ，但随后又打印了两次未定义。 有人可以解释为什么会这样吗？ 我通过传播......道具来让它工作。 但是console.log 保持不变？ 我不明白为什么。 这是我关于 Stack Overflow 的第一个问题，所以请随时给我反馈，告诉我如何提出更好的问题：）

Answer 1

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

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


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

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

Answer 2

我认为与其传递回调，不如传递决定组件是否显示的变量。 检查这个例子。

export const MyFunctionalComponent = ({ isShow, onClick }) => {
  return (
    <section>
      ...other code here
      {isShow && <div>something</div>}
    </section>
  );
};

export default function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <MyFunctionalComponent
      isShow={showModal}
      onClick={() => setShowModal(true)}
    />
  );
}

我还认为您可能会犯错并有其他想法……像这样：

<section>
  ...other code here
  <button onClick={ onClick }>something</button>}
</section>

Answer 3

您收到“未定义”响应的原因是因为正如@Zrogua 所提到的， onClick是一个事件侦听器 function 而不是一个持久值（如您定义的 Z9ED39E2EA931586B6A985A6942EF57E）。

import React from "react";

const YourButton = ({ onClick }) => {
  console.log(onClick);

  return <section>{onClick && <button>here</button>}</section>;
};

const ParentDiv = () => {
  return (
    <div>
      <h1>Button Props</h1>
      <h2>Start editing to see some magic happen!</h2>
      <YourButton onClick={() => console.log("CLICK")} />
    </div>
  );
};

export default ParentDiv;

console.log()的结果：

function onClick() // index.js:27:25

这是因为 props 是只读的。 来自 React 文档：

无论您将组件声明为 function 还是 class，它都不得修改自己的 props...此类函数被称为“纯”，因为它们不会尝试更改其输入，并且始终为相同的输入返回相同的结果。

---

因此，您的按钮仅在onClick function 被定义时才会显示。 例如，如果你没有给onClick一个 function 或值，按钮将不会出现：

import React, { useState } from "react";

const YourButton = ({ onClick }) => {
  console.log(onClick);
  return (
    <section>
      {onClick && <button>This button is shown if a button is defined.</button>}
    </section>
  );
};

const ParentDiv = () => {
  return (
    <div>
      <h1>Button Props</h1>
      <YourButton onClick={() => console.log("CLICK")} />
      <YourButton /> {/* You won't see this button because the function is not defined. */}
    </div>
  );
};

export default ParentDiv;

出现该按钮是因为 prop 具有未定义的值（您的onClick函数），并且由于它是只读的，因此您无法在子组件中访问该 function。

---

相反，（1）在父组件中定义模态 state 并（2）将 state 通过道具传递给按钮，如下所示：

import React, { useState } from "react";

const YourButton = ({ onClick }) => {
  console.log(onClick);
  return (
    <section>
      {onClick && <button>This button is shown if a button is defined.</button>}
    </section>
  );
};

const AltButton = ({ modal }) => {
  return (
    <section>
      {modal && (
        <button>This button is shown the modal state is passed.</button>
      )}
    </section>
  );
};

const ParentDiv = () => {
  const [modal, setModal] = useState(false);
  return (
    <div>
      <h1>Button Props</h1>
      <YourButton onClick={() => console.log("CLICK")} />
      <YourButton />{" "}
      {/* You won't see this button because the function is not defined. */}
      <section>
        <button onClick={() => setModal(!modal)}>OPEN MODAL</button>
      </section>
      {modal && <p>this is dependent on state</p>}
      <AltButton modal={modal} />
    </div>
  );
};

export default ParentDiv;

工作代码沙盒： https://codesandbox.io/s/stack-66715327-passingfunctions-92pzr

---

最后，如果我在字里行间阅读并正确理解您希望在模式打开时隐藏按钮，这里是我用于打开模式的按钮的一个小模式包装技巧： https://codesandbox.io/s /stack-66715327-modalwrapper-wvl54