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

【问题标题】：How to pass data from parent component to child after creation of child?创建子组件后如何将数据从父组件传递给子组件？
【发布时间】：2020-05-27 09:38:40
【问题描述】：

基本上，我正在使用 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.所以这就是我卡住的地方，在我的父类中检查答案后，如果选择的答案是真还是假，我该如何传递给子组件？也许我在这里想多了，但在这里对我的问题的解释会很好，也许我需要更改我的组件设计，所以应该在子组件中进行检查？

【问题讨论】：

你能贴出组件的代码吗？将更容易看到正在发生的事情以及您的 onClick 函数是如何处理的以及它到底在做什么
你通过 props 传递下去。

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

由于question 组件拥有状态，它应该告诉子组件它们应该呈现什么，类似于：

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

其中data 是您传递给组件的当前数据。子组件可以检查 prop answerIsCorrect 是否被传递，它的值是多少。

所以对于错误的答案应该是这样的：

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

如果还没有回答：

<AnswerBox data={data} />

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

【讨论】：

【解决方案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>
        );
    }
}

【讨论】：