为什么当我传递道具时，我的组件没有呈现？

Question

我制作了类似于登录页面的前端组件。当我试图通过开始道具阵线没有渲染出于某种原因。如果我不给它任何道具，那么它就会呈现得很好。我不知道为什么会这样。任何帮助都将不胜感激！

export default function App() {
const [start, setStart] = React.useState(false);
function startGame() {
    setStart(prevStart => !prevStart);
}
return (
    <div>
        <Front begin={startGame()} />
    </div>
)

}

export default function Front(props) {
return (
    <div className="login">
        <h1>Quizzical</h1>
        <h3>Read the questions carefully!</h3>
        <button onClick={props.begin} className="startButton">Start Quiz</button>
        <div className="blob-1"></div>
        <div className="blob-2"></div>
    </div>
)

}

Answer 1

像这样传递函数：

<Front begin={startGame} />

而不是这样：

<Front begin={startGame()} />

因为startGame()将在站点上运行函数，它返回的内容将作为道具传递。这种情况下，它返回无效(无)，这不是组件所期望的，因此出现了错误。

Answer 2

你可以像这样传递函数。

<Front begin={() => startGame()} />