react 表格

React 表格是在 React 应用程序中呈现和操作表格数据的常见任务。您可以使用 React 的组件化和状态管理功能来创建灵活且可重用的表格组件。

在 React 中，您可以使用 JSX 语法编写表格的结构。例如，以下是一个简单的表格组件的示例：

import React from 'react';

const Table = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>{item.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

在上面的示例中，我们创建了一个名为 Table 的函数式组件，它接受一个名为 data 的属性。该属性是一个包含表格数据的数组。

在组件的结构中，我们使用 <table> 元素来定义表格，<thead> 元素用于表头，<tbody> 元素用于表体。使用 .map() 方法遍历数据数组，并为每个数据项创建一个 <tr> 元素。在每个数据项的 <tr> 元素中，我们使用 <td> 元素来显示每个数据字段的值。

您可以通过向 Table 组件传递不同的数据属性来在应用程序中使用这个表格组件。以下是一个使用示例：

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

const App = () => {
  const data = [
    { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
    { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
    { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' },
  ];

  return (
    <div>
      <h1>React Table Example</h1>
      <Table data={data} />
    </div>
  );
};

export default App;

在上面的示例中，我们在 App 组件中定义了要在表格中显示的数据数组。然后，我们将数据作为属性传递给 Table 组件，以在应用程序中呈现表格。