Question

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

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

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

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

那么，我现在做的是，通过一个onClick功能，所以当选择的答案我可以检查它在我的父组件的子项。因此，在检查父类中的答案后，如果选择的答案是对还是错，我该如何传递给子组件，这就是我遇到的问题？也许我在这里想得太多，但是这里的问题解释会很棒，也许我需要更改组件设计，所以应该在子组件中进行检查？

Answer 1

由于question组件拥有状态，因此它应该告诉子组件它们应呈现的内容，类似以下内容：

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

data是您传递给组件的当前数据。子组件可以检查是否传递了道具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>
        );
    }
}

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

3 个答案: