如何将函数作为道具传递(函数组件到函数组件)

Question

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

以下是我拥有的代码 - 当我单击时，我没有获得控制台日志 - 有人可以告诉我哪里出错了吗？

父母

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

孩子

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传递功能。这里是沙盒