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

Question

基本上，我正在用 React 构建一个琐事游戏，我仍在学习，所以需要一些关于如何实现我的目标的建议。 我有 2 个组件question.jsx ，它是保持游戏状态的父组件
state = { currentQuestion: {}, questions: [], dataFetched: false }

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

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

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

So what I am currently doing is, passing an onClick function to the child so when the answer is chosen I am able to check it in my parent component. 所以这就是我卡住的地方，在我的父类中检查了答案之后，如果选择的答案是真还是假，我如何传递给子组件？ 也许我在这里想得太多了，但是在这里对我的问题的解释会很好，也许我需要更改我的组件设计，以便检查应该在子组件中完成？

Answer 1

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

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

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

所以对于错误的答案，它会是这样的：

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

如果还没有回答：

<AnswerBox data={data} />

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

Answer 2

您需要父组件重新渲染。 为此调用 this.setState() 并将布尔值向下传递给孩子。

Answer 3

这将取决于您的整体代码架构，但您只需要将答案结果存储在状态中的某个位置并将该状态传递给子组件。 当您更新父级中的那部分状态时，子级也将被更新，大致如下：

class Parent {
  state = {
    answerResults: {},
    questions: [],
  };

  checkAnswer = (question) => {
      const result = checkIfTrueOrFalse();
      const { answerResults } = this.state;
      answerResults[questionId] = result;

      this.setState({ answerResults });
  };

  render() {
    const { answerResults, questions } = this.state;

    return (
      <div>
       { 
         questions.map(q => (
           <AnswerBox 
             answerResult={answerResults[q.id]} 
             checkAnswer={this.checkAnswer} 
           />
          ) 
        }
      </div>
    );
  }
}

class AnswerBox {
    render() {
        const { answerResult, checkAnswer } = this.props;

        return (
            <div>
                { answerResult }
            </div>
        );
    }
}