javascript - 如何使用 JSX 将动态 HTML 元素附加到 React 组件？

Question

我是 Reactjs 的新手。我正在创建一个带有调查创建的应用程序，例如 Google Forms。我的组件有一个按钮，用于创建一个包含一些 HTML 元素的新 Div 以创建调查问题。为此，我在按钮点击功能上创建了一个 JSX 元素并将其推送到一个数组。然后，我在渲染函数中设置数组以显示其中的内容。

问题是，即使数组正在更新，页面上也看不到动态 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 组件知道重新渲染的唯一方法是设置状态。所以你应该在你的状态中有一个数组用于问题，然后基于该数组进行渲染。在数组中你想保留数据，而不是 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>
  );
}