如何在getElementById获取元素后，动态添加React组件到HTML中

要实现把字符串中的_Response_标记替换为<TextField />组件并渲染到指定div中，不能直接通过innerHTML操作（会把React组件当成普通HTML字符串处理），需要借助React的DOM渲染机制来实现，具体步骤和代码如下：

实现步骤 #

1. 拆分原始字符串，分离出普通文本和需要替换的标记位置
2. 构建包含文本节点和React组件的元素数组
3. 使用React官方渲染API将元素数组挂载到目标DOM节点

代码示例 #

假设页面中有一个目标div：

<div id="target-container"></div>

对应的React代码（以React 18为例）：

import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入你的TextField组件，这里以Material UI的组件为例，可替换为自定义组件
import TextField from '@mui/material/TextField';

const str = 'my name is _Response_ and I am from _Response_';

// 按标记拆分字符串
const contentParts = str.split('_Response_');

// 构建混合文本与组件的元素数组
const renderElements = [];
contentParts.forEach((text, index) => {
  // 添加普通文本节点
  if (text) {
    renderElements.push(text);
  }
  // 非最后一段的位置，插入TextField组件
  if (index !== contentParts.length - 1) {
    renderElements.push(
      <TextField 
        key={`response-input-${index}`} 
        placeholder="输入内容" 
        variant="outlined" 
      />
    );
  }
});

// 获取目标DOM元素
const targetDiv = document.getElementById('target-container');

// 渲染到目标节点
const root = ReactDOM.createRoot(targetDiv);
root.render(<>{renderElements}</>);

关键说明 #

• 拆分字符串后通过循环交替添加文本和组件，确保React能正确识别文本节点和组件元素
• 循环生成的组件必须添加唯一key属性，避免React渲染警告
• 必须使用React官方的createRoot（React 18）或ReactDOM.render（React 17及以下）方法渲染，不能直接操作DOM的innerHTML，否则React组件无法被正确实例化和渲染

内容的提问来源于stack exchange，提问作者Ubaid Baidi