react表格每一条数据下新增一条自定义行且可以修改自定义行的样式

为了实现在 React 表格中每一条数据下新增一条自定义行，以及修改自定义行的样式，你可以按照以下步骤进行操作：

创建一个包含数据和自定义行的组件：首先，创建一个包含数据和自定义行的组件，可以称之为 CustomTable。这个组件将接收一个包含数据的数组作为 prop。

import React from 'react';

const CustomTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          {/* ... */}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <React.Fragment key={index}>
            <tr>
              <td>{item.field1}</td>
              <td>{item.field2}</td>
              {/* ... */}
            </tr>
            <tr className="custom-row">
              <td colSpan={numberOfColumns}>Custom Row</td>
            </tr>
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
};

export default CustomTable;

添加自定义行样式：为了修改自定义行的样式，你可以在 CSS 文件中添加一个名为 custom-row 的类，并为其定义相应的样式。

.custom-row {
  background-color: #f6f6f6;
  /* ... */
}

使用 CustomTable 组件：在你的应用程序中使用 CustomTable 组件，将数据作为 prop 传递给它。

import React from 'react';
import CustomTable from './CustomTable';

const App = () => {
  const data = [
    { field1: 'Value 1', field2: 'Value 2' },
    { field1: 'Value 3', field2: 'Value 4' },
    // ...
  ];

  return (
    <div>
      <h1>Custom Table</h1>
      <CustomTable data={data} />
    </div>
  );
};

export default App;

通过以上步骤，你就可以在 React 表格中的每一条数据下新增一条自定义行，并且可以修改自定义行的样式