javascript - 为什么我的组件在传递 props( react )时没有渲染？

Question

我使我的前端组件类似于登录页面。当我尝试传递 begin 属性时，Front 由于某种原因不会渲染。如果我不传递任何 Prop ，那么它渲染得很好。我不知道为什么会发生这种情况。任何帮助将不胜感激!

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()将在现场运行该函数，它返回的内容将作为 props 传递。在这种情况下，它返回 void(无任何内容)，这不是组件所期望的，因此发生了错误。