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

基本上，我正在用React构建一个琐事游戏，我还在学习，所以需要一些关于如何实现我的目标的建议。我有两个组件，question.jsx，它是保持游戏状态的父组件 状态={ 当前问题：{}， 问题：[]， 获取的数据：false }

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

1-将所选答案发送给父类以检查其是否正确

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

---

因此，我目前正在做的是，将onClick函数传递给子级，以便在选择答案时，我能够在父组件中检查它。这就是我遇到的问题，在检查父类中的答案后，如果选择的答案为真或假，我如何传递给子组件？也许我在这里想得太多了，但是对我的问题的解释会很好，也许我需要改变我的组件设计，这样检查应该在子组件中进行

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

由于问题组件拥有该状态，它应该告诉子组件应该呈现什么，大致如下：

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

如果还没有答复：

<AnswerBox data={data} />

---

这只是为了说明解决这一问题的一种方法，这里的要点是，子组件应该只关心呈现和将用户操作发送回父组件。

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

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>
        );
    }
}

---

你能发布组件的代码吗？将更容易看到发生了什么，以及如何处理onClick函数，以及它正在做什么。您可以通过道具将其传递下去。

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>
        );
    }
}