React中使用表格：第一部分

1. 前言

React作为一个非常流行的前端框架,它可以用于构建复杂且高效的用户界面。为了更好地管理页面上的数据并提供最好的用户体验, 我们通常需要使用表格组件。在这篇文章的第一部分中，我们将探讨如何在React中使用表格。

2. 基础表格

2.1 创建基础表格的Markup

在React中,渲染表格的最基本方法是使用HTML标记创建表格的markup。下面是创建一个简单表格的基础样本：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>24</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>19</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

如上所示的HTML代码基本上创建了一个最基础的表格。表头行由<thead>元素开始，在其中创建表头单元格（可以使用<th>元素）.最后，用一个空行使用<tbody>元素定义表格主体

2.2 在React中渲染基础表格

我们可以使用React来渲染这个表格, 在 render() 方法中直接返回包含上面HTML代码的JSX元素

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>24</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>Jane</td>
            <td>19</td>
            <td>Female</td>
          </tr>
        </tbody>
      </table>
    );
  }
}
export default App;

上面的代码创建了一个React组件, 包含了一个返回基本HTML表格markup的render方法

3. 动态渲染表格

3.1 使用Props渲染表格

在React中，可以使用props从父组件向子组件传递数据。在这里，我们将看一下如何使用props渲染表格。

首先，我们需要在父组件中以类似以下的代码定义表格的标题和数据（即表格的props）：

const data = [
  { name: 'John', age: 24, gender: 'Male' },
  { name: 'Jane', age: 19, gender: 'Female' }
];
class App extends React.Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          {this.props.data.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
              <td>{item.gender}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}
ReactDOM.render(<App data={data} />, document.getElementById('root'));

在这里，我们将数据存储在变量data中，并通过将data作为prop传递给我们的应用程序组件。然后，在render()方法中，我们可以使用this.props.data访问传递的数据，并使用.map()方法来渲染数据。

使用.map()方法遍历数据数组时，我们为每个元素渲染一行<tr>, 以及每个元素中的每个数据属性渲染一个<td>元素。请注意，我们还指定了一个key属性，这是React要求我们做的：

当我们通过传递props来动态渲染表格时，我们也可以将表格封装到一个独立的组件中：

const data = [
  { name: 'John', age: 24, gender: 'Male' },
  { name: 'Jane', age: 19, gender: 'Female' }
];
class Table extends React.Component {
  renderRow(item, index) {
    return (
       <tr key={index}>
         <td>{item.name}</td>
         <td>{item.age}</td>
         <td>{item.gender}</td>
       </tr>
    );
  }
  
  render() {
    const { data } = this.props;
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          {data.map(this.renderRow)}
        </tbody>
      </table>
    );
  }
}
ReactDOM.render(<Table data={data} />, document.getElementById('root'));

3.2 使用State渲染表格

在 React 中，使用state来管理组件的动态数据. 在这里，我们将使用state来动态渲染表格。

我们的示例将使用一个简单的数据数组，我们可以使用state中的data属性来存储它。此外，我们可以将一个button元素放在视口中，并向onClick处理程序添加逻辑来更新data属性并重新渲染表格。

class Table extends React.Component {
  state = {
    data: [
      { name: 'John', age: 24, gender: 'Male' },
      { name: 'Jane', age: 19, gender: 'Female' }
    ]
  };
  
  renderRow(item, index) {
    return (
       <tr key={index}>
         <td>{item.name}</td>
         <td>{item.age}</td>
         <td>{item.gender}</td>
       </tr>
    );
  }
  
  updateState = () => {
    this.setState({
      data: [
        { name: 'Alice', age: 20, gender: 'Female' },
        { name: 'Bob', age: 22, gender: 'Male' }
      ]
    });
  }
  
  render() {
    const { data } = this.state;
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Gender</th>
            </tr>
          </thead>
          <tbody>
            {data.map(this.renderRow)}
          </tbody>
        </table>
        <button onClick={this.updateState}>Update Data</button>
      </div>
    );
  }
}
ReactDOM.render(<Table />, document.getElementById('root'));

上述代码中有一些值得注意的点.首先，在类构造函数中，我们初始化了一个data状态对象。 updateState()方法调用setState()来改变data的值以达到更新表格的目的。最后，当用户单击button元素时，会调用updateState()函数重新渲染表格.

3.3 在表格中嵌入带有交互行的标记数据

在某些情况下，表格中的列可能包含交互内容，例如链接, 按钮等。以下代码演示了如何在表格数据中嵌入一个带有交互行的标记，使用户能够与UI元素进行交互。

import React from 'react';
const data = [
  { id: 1, name: 'John', age: 24, gender: 'Male', actions: <button>View</button> },
  { id: 2, name: 'Jane', age: 19, gender: 'Female', actions: <button>View</button> }
];
class Table extends React.Component {
  renderRow(item, index) {
    const { actions, ...row } = item;
    return (
      <tr key={index}>
        {Object.values(row).map((value, index) => (
          <td key={index}>{value}</td>
        ))}
        <td>{actions}</td>
      </tr>
    );
  }
  
  render() {
    const headings = Object.keys(data[0]);
    return (
      <table>
        <thead>
          <tr>
            {headings.map((heading, index) => (
              <th key={index}>{heading}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map(this.renderRow)}
        </tbody>
      </table>
    );
  }
}
ReactDOM.render(<Table data={data} />, document.getElementById('root'));

与前面的例子类似，这里我们定义了一个数据数组，并将其存储在常量中。每个对象都包含actions属性，其中包含与用户操作相关的交互标记。在renderRow()方法中，我们使用Object.values()方法操作行来排除掉actions属性。

这将剩下的行数据放入一个<td>元素中，在表格的最后一列中增加一个列元素并放置行级操作.

4. 结论

在这篇文章中，我们探讨了如何在React中使用表格.我们首先看了如何创建一个基础表格的markup，然后学习了如何使用props和state来动态渲染表格以及如何嵌入带有交互行的标记数据。