正文

如何用 React 动态生成表格行和列，轻松实现表格内容的灵活展示

/0 浏览量
0604

在 React 中，动态生成表格是一种常见的需求，特别是在展示大量或动态变化的数据时。下面，我将详细介绍如何在 React 中实现动态生成表格行和列，以及如何灵活展示表格内容。

1. 确定表格结构

首先，你需要确定你的表格需要展示哪些列和数据。假设我们有一个用户列表，需要展示用户的姓名、年龄、邮箱和操作按钮。

const columns = [
  { key: 'name', title: '姓名' },
  { key: 'age', title: '年龄' },
  { key: 'email', title: '邮箱' },
  { key: 'action', title: '操作' }
];

2. 创建表格组件

接下来，创建一个表格组件，该组件将接受列数据和行数据作为 props。

class DynamicTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  render() {
    const { columns, data } = this.state;
    return (
      <table>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column.key}>{column.title}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index}>
              {columns.map((column) => (
                <td key={column.key}>{row[column.key]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

3. 使用表格组件

在父组件中，使用 DynamicTable 组件，并传入列数据和行数据。

const users = [
  { name: '张三', age: 28, email: 'zhangsan@example.com' },
  { name: '李四', age: 32, email: 'lisi@example.com' },
  { name: '王五', age: 26, email: 'wangwu@example.com' }
];

ReactDOM.render(
  <DynamicTable columns={columns} data={users} />,
  document.getElementById('app')
);

4. 动态更新表格内容

如果你的数据是动态变化的，你可以在父组件中修改数据，并通过 props 将更新后的数据传递给 DynamicTable 组件。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { name: '张三', age: 28, email: 'zhangsan@example.com' },
        { name: '李四', age: 32, email: 'lisi@example.com' },
        { name: '王五', age: 26, email: 'wangwu@example.com' }
      ]
    };
  }

  updateData = (newData) => {
    this.setState({ users: newData });
  }

  render() {
    return (
      <div>
        <DynamicTable columns={columns} data={this.state.users} />
        {/* 添加按钮或其他元素来触发数据更新 */}
      </div>
    );
  }
}

通过以上步骤，你就可以在 React 中轻松实现动态生成表格行和列，并灵活展示表格内容了。当然，这只是最基础的实现，你可以根据自己的需求添加排序、筛选、分页等功能，让表格更加实用和强大。

-- 展开阅读全文 --