創建子組件后如何將數據從父組件傳遞給子組件？

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