在React中使用非SVG的D3实现表格时，表格行无法渲染

我帮你排查了代码里的关键问题，主要有几个点导致表格行无法正常生成，下面是修复方案和详细解释：

问题根源分析 #

1. 直接操作body导致DOM冲突：原代码直接给body添加容器，这在React生态里很容易和其他组件的DOM发生冲突，而且React组件应该只管理自身内部的DOM元素。
2. D3数据绑定逻辑错误：在处理rows.enter()生成新行后，你没有对这些新行进行<td>的绑定操作，而是直接用初始的rows选择器，导致新行的单元格无法生成。
3. 依赖数组索引的不可靠映射：原代码用arr[0]、arr[11]这种数组索引来取数据，一旦JSON结构变化就会出错，维护性极差。
4. 无用的SVG标签：你明确提到没使用SVG，所以render里的svg标签是多余的。

修复后的完整代码 #

import React, { Component, createRef } from 'react';
import * as d3 from "d3";

class ViewDeploys extends Component {
  constructor(props) {
    super(props);
    // 创建ref获取组件内部容器，避免操作全局body
    this.tableContainer = createRef();
  }

  componentDidMount() {
    this.drawTable();
  }

  drawTable() {
    const column_names = ["Select","Deploy ID", "Requestor", "Market", "Env","Group","Deploy Date", "Approver", "Completed Date", "CRQ", "Job Status"];
    
    // 仅操作当前组件内的容器
    const container = d3.select(this.tableContainer.current);
    const filterableTable = container.append("div").attr("id", "FilterableTable");
    const table = filterableTable.append("table");

    // 生成表头
    const thead = table.append("thead").append("tr");
    thead.selectAll("th")
      .data(column_names)
      .enter()
      .append("th")
      .text(d => d);

    // 加载数据并生成表体
    d3.json("/data.json").then((data) => {
      const tbody = table.append("tbody");
      
      // 绑定数据到<tr>元素，用deploy_id作为唯一标识
      const rows = tbody.selectAll("tr")
        .data(data, d => d.deploy_id);

      // 处理新进入的<tr>
      const enterRows = rows.enter().append("tr");

      // 给每个新行添加第一个单元格（复选框）
      enterRows.append("td")
        .append("input")
        .attr("type", "checkbox");

      // 为每个新行绑定剩余单元格的数据，改用属性名映射更可靠
      enterRows.selectAll("td")
        .data(d => [
          d.deploy_id,
          d.requestor,
          d.market,
          d.env,
          d.group,
          d.deploy_date,
          d.approver,
          d.completed_date,
          d.crq,
          d.job_status
        ])
        .enter()
        .append("td")
        .text(d => d);

      // 合并enter和update阶段的元素，方便后续更新逻辑
      rows.merge(enterRows);
    });
  }

  render() {
    return (
      <section className="viewDeploysContainer">
        {/* 用ref绑定的容器替代无用的SVG */}
        <div ref={this.tableContainer} id="container"></div>
      </section>
    );
  }
}

export default ViewDeploys;

关键修改说明 #

• 使用React Ref：通过createRef获取组件内部的div容器，确保D3只操作当前组件的DOM，避免全局污染。
• 修正Enter阶段操作：把rows.enter()的结果存为enterRows，直接对新生成的<tr>进行单元格绑定，确保新行的内容能正常渲染。
• 优化数据映射：替换数组索引为对象属性名（比如d.deploy_id），你需要根据自己data.json的实际属性名调整这些字段，这样即使JSON结构变化也不会出错。
• 移除无用SVG：换成D3需要的div容器，符合你不使用SVG的需求。
• 合并Enter/Update：rows.merge(enterRows)统一处理新添加和已存在的行，为后续表格数据更新预留了扩展空间。

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