react编写table

下面是一个示例代码，演示如何使用 React 构建一个简单的表格组件：

import React from 'react';

class Table extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index}>
              <td>{row.name}</td>
              <td>{row.age}</td>
              <td>{row.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Table;

在这个示例中，我们创建了一个名为 Table 的组件，它接收一个名为 data 的 props，该 props 是一个数组，包含要在表格中显示的数据。

在 render 方法中，我们使用 JSX 创建一个表格元素，并在表格的头部定义了三个列，即 Name、Age 和 Email。然后，在表格的主体部分，我们使用 map 方法遍历数据数组，并为每个数组元素创建一个 tr 元素。在每个 tr 元素中，我们使用 td 元素分别显示该行的 name、age 和 email 属性。

最后，我们通过将 Table 组件作为默认导出来使其可在其他组件中使用。