React中无法将函数作为Props传递给子组件的问题排查

你犯了props名称不匹配的低级错误：

• 父组件MainComponent给Button传递的函数props叫onClick，但子组件Button里却在解构addTask变量，两者名称对不上，导致子组件根本拿不到父组件的addTask函数，点击自然没反应。
• 而btnColor的props名称在父子组件里完全一致，所以能正常生效。

方案一：修改父组件的props名称，和子组件保持一致 #

把MainComponent里的Button调用改成传递addTask作为props名称：

// MainComponent.js
import Button from "./Button";

const MainComponent = () => {
  
  const addTask = () => {
    console.log("Task Added...");
  };

  return (
    <div>
      <div> Header Component here </div>
      <div> Some Data </div>
      {/* 这里把onClick改成addTask */}
      <Button addTask={addTask} btnColor="red" />
      <div> Footer Component here </div>
    </div>
  );
};

export default MainComponent;

子组件代码无需修改，点击按钮就能触发addTask函数了。

方案二：修改子组件的解构名称，和父组件保持一致 #

保持父组件代码不变，修改Button组件里的解构变量名，把addTask改成onClick：

// Button.js
const Button = ({ onClick, btnColor }) => {
  return (
    <button style={{ backgroundColor: btnColor }} onClick={onClick}>
      Add
    </button>
  );
};

export default Button;

这样父组件传的onClick就能被子组件正确接收并绑定到按钮的点击事件上。

内容的提问来源于stack exchange，提问作者Swaraj