React中使用ReactDOM.render多次添加元素时被替换的问题

ReactDOM.render的核心特性是替换目标容器内的所有现有内容，而非追加元素。所以你每次调用它，容器里之前的input都会被新的覆盖，自然无法实现逐个新增。

正确实现方式：用React状态管理列表 #

React的设计思路是通过状态（state）驱动UI更新，而非直接操作DOM。你应该用组件维护要添加的元素列表，通过修改状态触发重新渲染，从而实现新增元素的需求。

函数组件示例（推荐） #

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

function QuestionPreview() {
  // 用state记录输入框的数量
  const [inputCount, setInputCount] = useState(1);

  // 点击新增输入框
  const addInput = () => {
    setInputCount(prev => prev + 1);
  };

  return (
    <div id="question-preview">
      {/* 根据数量渲染对应个数的输入框 */}
      {Array.from({ length: inputCount }).map((_, idx) => (
        <input
          key={idx}
          className="questionTextInput"
          name={`textInputQuestion[${idx}]`}
        />
      ))}
      <button onClick={addInput}>添加新输入框</button>
    </div>
  );
}

// 仅需初始化渲染一次组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<QuestionPreview />);

关键说明 #

• 用useState维护输入框的数量，每次点击按钮更新状态，React会自动重新渲染组件，追加新的输入框。
• 每个输入框必须添加key属性，帮助React识别元素的唯一性（复杂场景建议用业务唯一ID替代index）。
• 全程只调用一次根渲染，后续UI更新完全由状态变化驱动，这是React的标准用法。

不推荐的原生DOM追加方式（仅作参考） #

如果非要绕过React的状态机制，你可以每次创建新的DOM容器，渲染后追加到目标元素中，但这种方式会脱离React的管控，后续维护难度极大，不建议使用：

const questionPreview = document.getElementById('question-preview');
const newContainer = document.createElement('div');
questionPreview.appendChild(newContainer);

const input = React.createElement("input",{className:"questionTextInput",name:"textInputQuestion[]"},null);
ReactDOM.render(input, newContainer);

内容的提问来源于stack exchange，提问作者vivek kalanka