如何使用 JSX 將 append 動態 HTML 元素用於 React 組件？

Question

我是 Reactjs 的新手。 我正在創建一個帶有調查創建的應用程序，例如 Google Forms。 我的組件有一個按鈕來創建一個帶有一些 HTML 元素的新 Div 來創建一個調查問題。 為此，在按鈕上單擊 function，我正在創建一個 JSX 元素並將其推送到數組中。 然后，我在渲染 function 中設置數組以顯示其中的內容。

問題是，即使陣列正在更新，動態 HTML 部分也無法在頁面上看到。 除了按鈕之外，該頁面只是空的。 我怎樣才能解決這個問題？

零件：

import '../../styles/css/surveycreation.css';
import React, { Component } from 'react';

let questionId = 0;

class SurveyCreation extends Component {
    constructor(props) {
        super(props);
        this.questionsList = [];
        this.state = {

        }
    }

    addQuestion = (e) => {
        e.preventDefault();

        questionId = questionId + 1;

        this.questionsList.push(
            <div key={questionId}>
                question block
            </div>
        )
    }

    render() {

        return (
            <div>
                <button onClick={e => this.addQuestion(e)}>Add Question</button>
                <div>
                    {this.questionsList}
                </div>
            </div>
        );
    }
};

export default SurveyCreation;

Answer 1

react 組件知道重新渲染的唯一方法是設置 state。 因此，您的 state 中應該有一個用於問題的數組，然后基於該數組進行渲染。 在數組中要保留數據，而不是 JSX 元素。 渲染時創建元素。

constructor(props) {
  super(props);
  this.state = {
    questions: [],
  }
}

addQuestion = () => {
  setState(prev => ({
     // add some object that has the info needed for rendernig a question. 
     // Don't add jsx to the array
    questions: [...prev.questions, { questionId: prev.questions.length }];
  })
}

render() {
  return (
    <div>
      <button onClick={e => this.addQuestion(e)}>Add Question</button>
      <div>
        {this.state.questions.map(question => (
          <div key={question.questionId}>

          </div>
        )}
      </div>
    </div>
  );
}

Answer 2

我認為您的組件在填充元素數組后不會重新渲染。

嘗試將questionsList添加到組件的 state 並修改您的addQuestion方法，使其創建一個新數組，最后使用新數組調用 setState。

Answer 3

您需要 map 您的this.questionsList變量。

您可以將“問題字符串”保存在數組中，然后迭代打印您的 div 的數組。像這樣的東西。

<div>
    {this.state.questionsList.map(questionString, i => (
      <div key={i}>
        {questionString}
      </div>
    )}
</div>