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

Question

这是我传递 onClick 属性的函数（setShowModal 是来自 useState 挂钩的 setState()）：

<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 功能组件中的 prop 时，它最初在控制台中打印该功能，但随后又打印了两次未定义。有人可以解释为什么会这样吗？我通过传播 ...props 来让它工作。但是 console.log 保持不变？我不明白为什么。这是我在 Stack Overflow 上的第一个问题，请随时给我反馈如何提出更好的问题 :)

Answer 1

不能传递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>
   );
};

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

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

您收到 'undefined' 响应的原因是因为正如@Zrogua 提到的，onClick 是一个事件侦听器函数而不是持久值（如您定义的状态）。

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

之所以这样是因为道具是read-only。来自 React 文档：

Whether you declare a component as a function or a class, it must never modify its own props ... Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.

因此，只有定义了 onClick 函数，您的按钮才会显示。例如，如果您没有给 onClick 函数或值，则按钮不会出现：

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 函数），并且由于它是只读的，因此您无法在子组件中访问该函数。

相反，(1) 在父组件中定义模态状态，(2) 通过 props 将状态传递给按钮，如下所示：


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

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

why does my prop cease to exist after initially existing when I pass it through to a functional component?

javascript

reactjs

react-props