React父子组件导入与表格渲染问题求助

我帮你梳理下代码里的问题，一步步修正后就能实现你想要的表格渲染效果啦！

代码里的核心问题总结 #

• 导入路径错误：缺少路径开头的./，导致React无法正确定位文件
• 变量/组件名大小写不匹配：比如TableHeader和导入的tableHeader大小写不一致，Row1和定义的row1不匹配
• Props传递与接收不对应：父组件传的是rows，子组件却用this.props.row接收
• 子组件渲染方式错误：直接引用Row组件而非渲染父组件传入的子元素
• HTML结构不完整：遍历rows生成单元格时缺少<tr>包裹，不符合表格规范

修正后的完整代码 #

usingTable.js

import React, { Component } from "react";
// 修正导入路径，补全开头的./
import tableHeader from "./components/data/tableHeader.json";
import Rows from "./components/data/rows.json";
// 导入修正后的Table组件和Row子组件
import Table, { Row } from "./components/table.js";

class UsingTable extends Component {
  render() {
    return (
      <>
        {/* 修正变量名，与导入的tableHeader保持一致 */}
        <Table tableHeader={tableHeader} rows={Rows}>
          <Row>
            <td colSpan="2">A</td>
            <td>B</td>
            <td>C</td>
          </Row>
        </Table>
      </>
    );
  }
}

export default UsingTable;

table.js

import React, { Component } from "react";

// 把组件名改为Table，和导入时的名称对应
class Table extends Component {
  render() {
    // 遍历表头数据生成<th>，添加key避免React警告
    const tableHeader = this.props.tableHeader.map((col, i) => (
      <th key={i}>{col}</th>
    ));
    // 修正props为rows，遍历每行数据生成完整的<tr>
    const dataRows = this.props.rows.map((row, i) => (
      <tr key={i}>
        {row.map((cell, j) => (
          <td key={j}>{cell}</td>
        ))}
      </tr>
    ));

    return (
      <table>
        {/* 如果不需要表头，可以直接删除thead部分 */}
        <thead>
          <tr>{tableHeader}</tr>
        </thead>
        <tbody>
          {/* 渲染从rows生成的数据行 */}
          {dataRows}
          {/* 渲染父组件传入的自定义Row子元素 */}
          {this.props.children}
        </tbody>
      </table>
    );
  }
}

export default Table;
// Row子组件保持不变，返回包含子元素的<tr>
export const Row = (props) => {
  return <tr>{props.children}</tr>;
};

修正后渲染效果 #

最终会生成符合你需求的表格结构：

<table>
  <thead>
    <tr>
      <!-- 对应tableHeader.json中的表头内容 -->
    </tr>
  </thead>
  <tbody>
    <!-- 对应rows.json中的数据行 -->
    <tr><td>...</td><td>...</td><td>...</td></tr>
    <!-- 自定义的合并单元格行 -->
    <tr>
      <td colSpan="2">A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

如果你的期望结果不需要表头，直接删除table.js中的<thead>部分即可。

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