React中点击按钮将<SaveTask/>组件追加到指定id容器的实现方案

嘿，我完全懂你的需求——想点击按钮后把<SaveTask/>追加到指定容器里，而不是替换掉原来的内容对吧？直接用document.getElementById()操作DOM可不是React的正确打开方式，咱们用React的状态管理就能优雅搞定这个问题，还能遵循React的设计理念！

问题根源分析 #

你之前用布尔值saveTask控制组件显示，这种方式只能切换单个组件的显示/隐藏；而且在render里直接操作DOM（document.getElementById('saveTask').innerHTML = <SaveTask/>）是错误的——React的render函数应该返回JSX，直接操作DOM会绕过虚拟DOM，导致状态和UI不同步，容易出各种奇怪的bug。

正确解决方案：用数组状态追踪要渲染的组件 #

我们可以把状态改成一个数组，每点击一次按钮就往数组里添加一个元素（用来标识需要渲染的新组件），然后在render里遍历这个数组，把所有的<SaveTask/>组件渲染到容器里，这样就能实现追加效果了。

修改后的完整代码如下：

import React, { Component } from 'react'
import SaveTask from './SaveTask';

export default class TaskHeader extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 用数组存储需要渲染的SaveTask标识，初始为空
      saveTasks: [],
    }
    this.showComp = () => {
      // 使用函数式更新state，确保基于最新状态修改
      this.setState(prevState => ({
        saveTasks: [...prevState.saveTasks, {}] // 每次点击添加新元素，触发重新渲染
      }))
    }
  }

  render() {
    return (
      <div>
        <div className="container-fluid bg-white border-bottom">
          <div className="row">
            <div className="col-12">
              <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
              <div className="tasks-lower">
                <span className="text-secondary text-size">TASK</span>
                <button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
              </div>
            </div>
          </div>
        </div>
        <div id="saveTask">
          {/* 保留原容器内容 */}
          Return a component to this section when clicking the button
          {/* 遍历数组，渲染所有SaveTask组件 */}
          {this.state.saveTasks.map((_, index) => (
            <SaveTask key={index} /> {/* 用index作为key，因为是追加式操作，不会改变元素顺序 */}
          ))}
        </div>
      </div>
    )
  }
}

关键细节说明 #

• 数组状态的作用：saveTasks数组的每一个元素都代表一个需要渲染的<SaveTask/>组件，每次点击按钮就往数组里加一个新元素，React会检测到状态变化，重新渲染UI并把新组件追加到容器里。
• 函数式更新state：用prevState获取最新状态，避免因为React状态更新的异步特性导致的错误。
• key的重要性：在map渲染组件时必须加key，这里用数组索引是安全的，因为我们只会往数组末尾追加元素，不会改变已有元素的顺序。

为什么不直接操作DOM？ #

React的核心是状态驱动UI，虚拟DOM会帮我们高效更新真实DOM。如果直接操作DOM，React就无法追踪这些变化，可能导致状态和UI不一致，后续的状态更新还可能覆盖你手动修改的DOM内容，引发难以排查的问题。所以尽量用React的状态和JSX来描述UI，而不是直接操作DOM。

内容的提问来源于stack exchange，提问作者Aneesh Edavalath S