如何将函数作为道具传递（函数组件到函数组件）。

Question

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

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

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

儿童

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来传递函数。这里有一个 沙盒