如何在 ReactJS 中创建表？

在 ReactJS 中创建表很常见，因为表格是显示数据的主要方式之一。在这里，我们将介绍如何使用 ReactJS 创建表。

1. 安装 ReactJS

首先，需要安装 ReactJS，可以使用以下命令安装：

npm install react

2. 导入 ReactJS

在代码中导入 ReactJS 的方式如下：

import React from 'react';

3. 创建表格组件

为了创建表格，我们需要创建一个表格组件。这个组件将根据传递给它的数据渲染表格。

function Table(props) {
  return (
    <table>
      // 表格内容
    </table>
  );
}

4. 创建表头

使用<th>标签创建表头。

function Table(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>列名1</th>
          <th>列名2</th>
          <th>列名3</th>
        </tr>
      </thead>
      // 表格内容
    </table>
  );
}

5. 创建行和单元格

使用<tr>和<td>标签创建行和单元格。可以使用map()函数从传递给表格组件的数据中创建行，并使用嵌套的map()函数从每行数据中创建单元格。

function Table(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>列名1</th>
          <th>列名2</th>
          <th>列名3</th>
        </tr>
      </thead>
      <tbody>
        {props.data.map(row => (
          <tr key={row.id}>
            {Object.values(row).map(cell => (
              <td key={cell}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

这里我们使用了一个props.data数组作为输入数据，其中每个元素都代表一行。使用Object.values()函数从每行中获取单元格，然后使用map()函数将每个单元格作为<td>标签渲染。

6. 渲染表格

在父组件中使用Table组件，并将所需的数据作为属性传递。

function App() {
  const data = [
    { id: 1, name: '张三', age: 18 },
    { id: 2, name: '李四', age: 20 },
    { id: 3, name: '王五', age: 22 }
  ];

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

完整代码

import React from 'react';

function Table(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>列名1</th>
          <th>列名2</th>
          <th>列名3</th>
        </tr>
      </thead>
      <tbody>
        {props.data.map(row => (
          <tr key={row.id}>
            {Object.values(row).map(cell => (
              <td key={cell}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function App() {
  const data = [
    { id: 1, name: '张三', age: 18 },
    { id: 2, name: '李四', age: 20 },
    { id: 3, name: '王五', age: 22 }
  ];

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

export default App;

以上是在 ReactJS 中创建表的步骤和示例代码。