将函数作为props传递给React子组件时无法正常执行的问题

错误原因分析 #

你的代码存在两个关键问题导致函数无法触发：

• props名称不匹配：父组件传递的props属性是onClick，但子组件里尝试调用的是props.Reset，两者名称不一致，导致子组件找不到对应的函数。
• 函数未实际执行：不管是父组件里的() => Reset还是子组件里的() => props.Reset，都只是返回了函数的引用，没有调用函数，所以点击按钮时不会执行Reset里的逻辑。

修正后的代码 #

父组件（App.js）

import React from "react";
import Win from "./components/Win"

function App() {
  const [squares, setSquares] = React.useState(dices)
  const [allSame, setAllSame] = React.useState(false)

  function Reset() {
    console.log("yes")
  }

  // 修正：将props属性名改为Reset，直接传递函数引用
  return (
    <Win Reset={Reset} />
  )
}

export default App;

子组件（Win.js）

import React from "react"
import reset from "../images/reset.png"
import Confetti from "./Confetti"

export default function Win(props) {
    return (
        <div className="Win">
            {/* <Confetti /> */}
            <h1 style={{color:"white", fontSize:"4rem"}}>You Won</h1>
            {/* 修正：点击时执行props.Reset函数 */}
            <button onClick={props.Reset}>Press ME</button>
        </div>
    )
}

补充说明 #

• 如果需要在传递函数时额外传递参数，可以用箭头函数包裹，比如父组件里写<Win Reset={() => Reset(参数)} />，子组件里对应写成<button onClick={props.Reset}>Press ME</button>。
• 直接传递函数引用（Reset={Reset}）比箭头函数包裹更高效，避免每次渲染都创建新的函数实例。

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