如何使用数组中的 ReactJS 构建 HTML 表格？

在开发 ReactJS 应用程序时，经常需要在渲染数据时使用表格。这个问题的解决方案是将数据存储在数组中，然后使用 JSX 构建表格。

1. 基本数据准备

为了展示如何在 ReactJS 中构建 HTML 表格，我们需要一个简单的数据集合。为此，我们创建一个包含产品名称和价格的数组。

const products = [
  { name: 'Apple', price: '$0.25' },
  { name: 'Banana', price: '$0.15' },
  { name: 'Orange', price: '$0.30' }
];

2. 构建表头

首先，我们需要为表格构建表头。表头通常由一组表头单元格组成，每个单元格表示数据的一列。使用 JSX，我们可以很容易地构建表头。

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
  );
};

3. 构建表格体

接下来，我们需要为表格构建表格体。在表格体中，我们需要为每个数据行创建一个表格行，每个单元格表示数据的一列。在这里，我们使用 map() 方法遍历数组并为每个数据行构建一个表格行。

const TableBody = (props) => {
  const rows = props.productsData.map((product, index) => {
    return (
      <tr key={index}>
        <td>{product.name}</td>
        <td>{product.price}</td>
      </tr>
    );
  });

  return <tbody>{rows}</tbody>;
};

4. 构建完整表格

现在，我们已经构建了表头和表格体，我们只需要将它们组合在一起以创建完整的表格。

const ProductsTable = (props) => {
  return (
    <table>
      <TableHeader />
      <TableBody productsData={props.productsData} />
    </table>
  );
};

ReactDOM.render(
  <ProductsTable productsData={products} />,
  document.getElementById('root')
);

5. 完整代码

const products = [
  { name: 'Apple', price: '$0.25' },
  { name: 'Banana', price: '$0.15' },
  { name: 'Orange', price: '$0.30' }
];

const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
  );
};

const TableBody = (props) => {
  const rows = props.productsData.map((product, index) => {
    return (
      <tr key={index}>
        <td>{product.name}</td>
        <td>{product.price}</td>
      </tr>
    );
  });

  return <tbody>{rows}</tbody>;
};

const ProductsTable = (props) => {
  return (
    <table>
      <TableHeader />
      <TableBody productsData={props.productsData}/>
    </table>
  );
};

ReactDOM.render(
  <ProductsTable productsData={products} />,
  document.getElementById('root')
);

以上就是如何使用数组中的 ReactJS 构建 HTML 表格的介绍，希望可以对你有所帮助。