React Suite 行组件

React Suite 是一个 React UI 组件库，包含了丰富的组件，其中行组件是其中的重要一部分。本文将介绍 React Suite 中的行组件。

Table

Table 组件用于展示数据，可以通过 dataSource、columns 属性来设置数据源和列定义，支持表头固定、列固定、行固定、排序、多选等功能。以下是一个示例代码片段：

import { Table } from 'rsuite';

const dataSource = [
  { name: 'John Doe', age: 25, gender: 'Male' },
  { name: 'Jane Deer', age: 30, gender: 'Female' },
  { name: 'Bob Smith', age: 35, gender: 'Male' },
];

const columns = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Gender', dataIndex: 'gender' },
];

function App() {
  return <Table dataSource={dataSource} columns={columns} />;
}

List

List 组件用于展示一组数据，支持自定义模板、分页、加载更多等功能。以下是一个示例代码片段：

import { List } from 'rsuite';

const items = [
  { title: 'Item 1', content: 'Content 1' },
  { title: 'Item 2', content: 'Content 2' },
  { title: 'Item 3', content: 'Content 3' },
];

function renderItem(item, index) {
  return (
    <List.Item key={index}>
      <h4>{item.title}</h4>
      <p>{item.content}</p>
    </List.Item>
  );
}

function App() {
  return <List items={items} renderItem={renderItem} />;
}

Tree

Tree 组件用于展示树形数据，支持自定义节点、默认展开节点、拖拽等功能。以下是一个示例代码片段：

import { Tree } from 'rsuite';

const data = [
  {
    label: 'Node 1',
    value: '1',
    children: [
      { label: 'Node 1-1', value: '1-1' },
      { label: 'Node 1-2', value: '1-2' },
    ],
  },
  {
    label: 'Node 2',
    value: '2',
    children: [
      { label: 'Node 2-1', value: '2-1' },
      { label: 'Node 2-2', value: '2-2' },
    ],
  },
];

function App() {
  return <Tree defaultExpandAll data={data} />;
}

Conclusion

React Suite 中的行组件包含了 Table、List、Tree 等组件，可以满足各种展示数据的需求。以上是一个简单的介绍，更多信息请查看官方文档。你也可以试试这些组件，以便更好的理解它们的用法。