javascript - 创建子组件后如何将数据从父组件传递给子组件？

Question

基本上，我正在使用 React 构建一个问答游戏，并且仍在学习中，因此需要一些关于如何实现我的目标的建议。我有 2 个组件，question.jsx，它是保持游戏状态的父组件
状态 = {
当前问题:{},
问题: []，
获取数据:假
}

和 answerBox.jsx 是子组件，它只是将给定问题的多项选择答案呈现为 2x2 网格样式。所以我想在这里实现的是当我选择答案时在子组件中

1-将选择的答案发送给父类检查是否正确

2- 将答案标记为选择一段时间，然后如果正确则将其标记为绿色，如果错误则标记为红色

所以我目前正在做的是将 onClick 函数传递给子组件，这样当选择答案时我就可以在父组件中检查它。所以这就是我陷入困境的地方，在检查父类中的答案后，如果所选答案是真还是假，我如何传递给子组件？也许我在这里想得太多了，但是对我的问题的解释会很好，也许我需要更改我的组件设计，以便检查应该在子组件中完成？

Answer 1

由于 question 组件拥有状态，因此它应该告诉子组件它们应该渲染什么，大致如下:

<AnswerBox data={data} answerIsCorrect={true} />

其中data是您传递给组件的当前数据。子组件可以检查 prop answerIsCorrect 是否已传递以及它的值是什么。

对于错误的答案，它会是这样的:

<AnswerBox data={data} answerIsCorrect={false} />

如果还没有回答:

<AnswerBox data={data} />

这只是为了展示解决此问题的一种方法，这里的要点是子组件应该只关心渲染并将用户操作发送回父组件。