Ant Design是一个 React UI 库,具有众多易于使用的组件,有助于构建优雅的用户界面。
由中国集团阿里巴巴(Alibaba)创建,Ant Design被几个大名称使用:阿里巴巴(当然),Tencent,Baidu等等.虽然Material-UI仍然是最受欢迎的React UI图书馆,在Github上有超过40万颗星星,但Ant Design目前处于接近一秒钟的位置,并且正在迅速关闭。
还有一个移动版本的蚂蚁设计,你可以 了解更多关于它在这里 。
开始的
在本教程中,我们将构建一个基本的 Todo 应用程序,展示一些 Ant Design 的组件. 我们的第一步将是设置我们的锅炉板. 我使用 create-react-app这样做。
然后,我们需要在项目中添加antd依赖性:
1$ yarn add antd
2
3# or, using npm:
4$ npm install antd --save
在我们开始构建我们的<Todo />组件之前,我们将在根组件中添加一个参考:
1[label index.js]
2import React from "react";
3import ReactDOM from "react-dom";
4import Todo from "./todo";
5
6import "./styles.css";
7
8function App() {
9 return (
10 <div className="App">
11 <Todo />
12 </div>
13 );
14}
15
16const rootElement = document.getElementById("root");
17ReactDOM.render(<App />, rootElement);
构建整个组件
现在我们可以开始构建我们的<Todo />组件,打开一个名为todo.js的新文件,其中包含以下内容:
1[label todo.js]
2import React from "react";
3
4export default class Todo extends React.Component {
5 render() {
6 return (
7 <div className="todoContainer">
8 <h1>TODO App</h1>
9 </div>
10 );
11 }
12}
我将编辑风格表,以便.todoContainer在页面上很好地集中。
1[label styles.css]
2.App {
3 font-family: sans-serif;
4 text-align: center;
5}
6
7.todoContainer {
8 width: 75%;
9 margin-left: auto;
10 margin-right: auto;
11}
很酷!现在让我们添加一个输入到<Todo />组件. 我们将使用由antd提供的组件,确保也导入到库的 CSS 文件。
1[label todo.js]
2import React from "react";
3import { Input } from "antd";
4
5// Don't forget to include the CSS styles for antd!
6import "antd/dist/antd.css";
7
8export default class Todo extends React.Component {
9 render() {
10 return (
11 <div className="todoContainer" />
12 <h1>TODO App</h1>
13
14 <Input
15 placeholder="What needs to be done?"
16 />
17 </div>
18 );
19 }
20}
很棒,现在我们正在渲染一个文本输入框,但是,它什么也没做,我们需要我们的输入来将其内容添加到组件的状态,这样我们就可以渲染所有内容的列表。
1[label todo.js]
2// --- snip ---
3
4export default class Todo extends React.Component {
5 constructor() {
6 super();
7
8 // Initialize the state
9 this.state = {
10 todos: []
11 };
12 }
13
14 handlePressEnter = e => {
15 // Create a todo object containing its index and content
16 const todo = {
17 index: this.state.todos.length,
18 content: e.target.value
19 };
20
21 // Add the todo to our array
22 const newTodos = this.state.todos.concat(todo);
23
24 this.setState({
25 todos: newTodos
26 });
27
28 // Clear input
29 e.target.value = "";
30 };
31
32 render() {
33 return (
34 <div className="todoContainer">
35 <h1>TODO App</h1>
36
37 <Input
38 placeholder="What needs to be done?"
39 onPressEnter={this.handlePressEnter}
40 />
41 </div>
42 );
43 }
44}
现在handlePressEnter()将更新组件的状态,每当用户输入一个新的todo项目时,我们仍然需要渲染它们。
为此,我们可以使用Ant Design的<List />组件,它将一个数组作为其dataSource支撑,并根据其renderItem支撑传递的任何函数来渲染它。
1[label todo.js]
2import React from "react";
3import { Input, List } from "antd";
4
5import "antd/dist/antd.css";
6
7export default class Todo extends React.Component {
8 // --- snip ---
9
10 render() {
11 return (
12 <div className="todoContainer">
13 <h1>TODO App</h1>
14
15 <Input
16 placeholder="What needs to be done?"
17 onPressEnter={this.handlePressEnter}
18 />
19
20 <List
21 {/* emptyText sets the text to display in an empty list */}
22 locale={{ emptyText: "No todo items" }}
23 dataSource={this.state.todos}
24 renderItem={item => (
25 <List.Item>{item.content}</List.Item>
26 )}
27 />
28 </div>
29 );
30 }
31}
Ta-da!现在我们有我们的基本的Todo应用程序工作!然而,还有更多我们可以做,使它更好!
得到幻想
我们的Todo应用程序正在运行,但我们需要添加更多:最重要的是,删除按钮,我们还会添加日期选择器,为什么不?
为了避免使我们的<Todo />过于复杂,我将将<List.Item />提取到它自己的单独组件中。
要作为删除按钮,我们可以使用 Ant 的<Icon />组件。 将其添加到<List.Item /> 的action prop,这需要一系列组件。 若要查看图标的完整列表,请参阅 Ant Design 网站上的 此页。
1[label todo.js]
2import React from "react";
3import { Input, List, Icon } from "antd";
4
5import "antd/dist/antd.css";
6
7export default class Todo extends React.Component {
8 // --- snip ---
9
10 removeTodo = index => {
11 let newTodos = [...this.state.todos];
12
13 // Remove element
14 newTodos.splice(index, 1);
15
16 // Decrement greater indexes
17 for (let i = index; i < newTodos.length; i++) {
18 newTodos[i].index -= 1;
19 }
20
21 // Update state
22 this.setState({
23 todos: newTodos
24 });
25 };
26
27 render() {
28 return (
29 <div className="todoContainer">
30 <h1>TODO App</h1>
31
32 <Input
33 placeholder="What needs to be done?"
34 onPressEnter={this.handlePressEnter}
35 />
36
37 <List
38 locale={{ emptyText: "No todo items" }}
39 dataSource={this.state.todos}
40 renderItem={item => (
41 <TodoItem
42 todo={item}
43 removeTodo={this.removeTodo}
44 />
45 )}
46 />
47 </div>
48 );
49 }
50}
51
52class TodoItem extends React.Component {
53 remove = () => {
54 // Remove this TodoItem
55 this.props.removeTodo(this.props.todo.index);
56 };
57
58 render() {
59 return (
60 <List.Item
61 actions={[
62 <Icon
63 type="close-circle"
64 theme="filled"
65 onClick={this.remove}
66 />
67 ]}
68 >
69 {this.props.todo.content}
70 </List.Item>
71 );
72 }
73}
很棒! 现在剩下的只是添加 Ant 的<DatePicker />组件。 要做到这一点,我们将通过将date和dateString属性添加到我们在状态中存储的 todo 对象中来更新handlePressEnter()方法,然后我们需要一个额外的方法,即setDate(),以更新这些属性。
1[label todo.js]
2import React from "react";
3import { Input, List, Icon, DatePicker } from "antd";
4
5import "antd/dist/antd.css";
6
7export default class Todo extends React.Component {
8 // --- snip ---
9
10 handlePressEnter = e => {
11 // Create a todo object containing its index, content,
12 // as well as an empty date
13 const todo = {
14 index: this.state.todos.length,
15 content: e.target.value,
16 date: null,
17 dateString: ""
18 };
19
20 // Add the new todo to our array
21 const newTodos = this.state.todos.concat(todo);
22
23 this.setState({
24 todos: newTodos
25 });
26
27 // Clear input
28 e.target.value = "";
29 };
30
31 setDate = (index, date, dateString) => {
32 // Set the date of the given todo
33 let newTodos = [...this.state.todos];
34 newTodos[index].date = date;
35 newTodos[index].dateString = dateString;
36
37 // Initialize the state
38 this.setState({
39 todos: newTodos
40 });
41 };
42
43 render() {
44 return (
45 <div className="todoContainer">
46 <h1>TODO App</h1>
47
48 <Input
49 placeholder="What needs to be done?"
50 onPressEnter={this.handlePressEnter}
51 />
52
53 <List
54 locale={{ emptyText: "No todo items" }}
55 dataSource={this.state.todos}
56 renderItem={item => (
57 <TodoItem
58 todo={item}
59 removeTodo={this.removeTodo}
60 setDate={this.setDate}
61 />
62 )}
63 />
64 </div>
65 );
66 }
67}
68
69class TodoItem extends React.Component {
70 remove = () => {
71 // Remove this TodoItem
72 this.props.removeTodo(this.props.todo.index);
73 };
74
75 handleDateChange = (date, dateString) => {
76 // Update the date when changed
77 this.props.setDate(this.props.todo.index, date, dateString);
78 }
79
80 render() {
81 return (
82 <List.Item
83 actions={[
84 <DatePicker
85 format="MM/DD/YYYY"
86 onChange={this.handleDateChange}
87 value={this.props.todo.date}
88 />,
89 <Icon
90 type="close-circle"
91 theme="filled"
92 onClick={this.remove}
93 />
94 ]}
95 >
96 {this.props.todo.content}
97 </List.Item>
98 );
99 }
100}
是啊!是啊!
我們現在有了使用 Ant Design 的全功能 Todo 應用程式! 如果您想了解更多關於 Ant 的資訊,請瀏覽 他們的文件。
您可以在 CodeSandbox找到这篇文章的完整代码。