在React类组件中使用ReactDOM.render渲染多ID组件的问题

核心思路 #

放弃在类组件内用ReactDOM.render手动渲染的方式，利用React声明式渲染的特性，直接在组件的render方法里遍历接口返回的数组，动态生成带对应ID的容器并渲染数据。

步骤实现 #

1. 存储接口数据：在类组件的state中保存GET请求获取到的JSON数组
2. 动态生成组件结构：遍历数组，为每个元素创建带唯一ID的容器，并根据数据渲染对应内容

示例代码 #

import React, { Component } from 'react';

class ModuleRenderer extends Component {
  state = {
    modules: [] // 存储接口返回的模块数组
  };

  componentDidMount() {
    // 发起GET请求获取数据
    fetch('/your-api-endpoint')
      .then(response => response.json())
      .then(data => this.setState({ modules: data }))
      .catch(error => console.error('数据请求失败:', error));
  }

  // 根据模块数据渲染对应内容，可自定义逻辑
  renderModule(module) {
    return (
      <div className="module-content">
        <h3>{module.title}</h3>
        <p>{module.description}</p>
      </div>
    );
  }

  render() {
    const { modules } = this.state;
    return (
      <div className="modules-container">
        {modules.map(module => (
          // 每个模块对应唯一ID的容器，用module.id作为key和id
          <div key={module.id} id={module.id} className="module-wrapper">
            {this.renderModule(module)}
          </div>
        ))}
      </div>
    );
  }
}

export default ModuleRenderer;

原方法失效的原因 #

在React类组件内部调用ReactDOM.render会跳过组件的生命周期管理，导致DOM状态与React组件状态不一致。如果目标容器本身就在当前组件的渲染输出中，组件更新时会覆盖手动渲染的内容，自然看不到效果。

注意事项 #

• 遍历数组时必须添加key属性，使用模块的唯一id作为key是最优选择，避免渲染异常
• 确保接口返回的每个模块都有唯一的id字段，防止ID冲突
• 若需操作特定ID的DOM元素，优先使用React的ref机制，而非直接通过document.getElementById操作

内容的提问来源于stack exchange，提问作者Joshua Cadman