Sunflower
Xử lý Thành phần cho antd (Ant Design).
Đặc điểm
- Hỗ trợ antd4, antd3
- Mối quan hệ giữa các thành phần antd được thể hiện bằng cách sử dụng react-hooks và các thành phần xử lý được sử dụng để đơn giản hóa việc phát triển
- Các Thành phần xử lý được trích xuất từ các quy trình kinh doanh thực tế và được sử dụng ngay lập tức
Tại sao
Thông thường, chúng ta sử dụng nhiều thành phần của antd để hoàn thành một quy trình. Ví dụ, nếu bạn muốn hoàn thành chức năng “sử dụng Bảng để hiển thị danh sách sau khi tìm kiếm Biểu mẫu”, bạn cần xử lý mối quan hệ giữa “Biểu mẫu” và “Bảng”, bao gồm truy vấn, phân trang, v.v.
Có cách nào đó để đơn giản hóa việc duy trì mối quan hệ giữa các thành phần? Đó là lý do tại sao có Sunflower. React-hooks mô tả một tình huống được gọi là “Các Thành phần Xử lý”. Sunflower là một loạt “Các Thành phần Xử lý” dựa trên antd.
Dưới đây là một ví dụ về tình huống “Biểu mẫu & Bảng”. Bạn chỉ cần mã sau để hoàn thành các chức năng như truy vấn và phân trang. useFormTable
là một react-hooks, nó sẽ trả về các thuộc tính của thành phần antd, v.v. Bạn có thể gửi các thuộc tính này cho thành phần antd để hoàn thành kết nối giữa các thành phần.
import React from 'react';
import { useFormTable } from 'sunflower-antd';
import { Input, Button, Table, Form } from 'antd';
export default props => {
const { formProps, tableProps } = useFormTable({
async search(values) {
const res = await request(values);
return res;
},
});
return (
<div>
<Form {...formProps}>
<Form.Item label="Username" name="username">
<Input placeholder="Username" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Search
</Button>
</Form.Item>
</Form>
<Table
columns={[
{
title: 'Username',
dataIndex: 'username',
key: 'username',
},
]}
{...tableProps}
/>
</div>
);
};
Tài liệu
Sử dụng
$ npm i sunflower-antd --save
// or
$ yarn add sunflower-antd
Phát triển
$ yarn
$ yarn start
Chi tiết Tải về:
Tác giả: ant-design
Nguồn: https://github.com/ant-design/sunflower
Giấy phép: MIT license