如何将函数作为 prop 传递（函数组件到函数组件）

Question

我目前正在尝试从 class 过渡到函数组件。我知道在 class 组件之间传递函数涉及绑定，然后将 onClick 添加到 child 组件。

下面是我的代码 - 当我点击时我没有收到控制台日志 - 谁能告诉我哪里出错了？

PARENT

import React, { useState } from 'react'
import Box from './Box'
import './GameBoard.css'
import { v4 as uuidv4 } from 'uuid'

function GameBoard() {

    const randLit = () => (Math.floor(Math.random() * 2)) === 1
    const [gameBoard, setGameBoard] = useState([...new Array(25)].map(box => randLit()))

    const handleIsLit = (evt) => {
        console.log('working')
    }

    return (
        <div className="GameBoard">
            {gameBoard.map((box, idx) => <Box isLit={box} key={uuidv4()} onClick={handleIsLit} />)}
        </div>
    )

}

export default GameBoard

CHILD

import React from 'react'
import './Box.css'


const Box = (props) => {
        return <div onClick={props.handleIsLit} className={`Box ${props.isLit ? 'Box-light' : 'Box-dark'}`}></div>
}

export default Box

Answer 1

道具名称是onClick，不是handleIsLit

const Box = (props) => {
        return <div onClick={props.onClick} className={`Box ${props.isLit ? 'Box-light' : 'Box-dark'}`}></div>
}

Answer 2

你不应该通过 onClick 传递函数。这里有一个sandbox

如何将函数作为 prop 传递（函数组件到函数组件）

How to pass function as a prop (function component to function component)

reactjs

react-component

react-hooks