（20）Redux 入门——② 使用 Antd 实现 TodoList 页面布局 | React 基础理论实操

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 安装 Antd

🔗Antd Design

Antd 在开发一些“后台管理工具”时用的非常多，我们可以用它很迅速地开发出一个很漂亮的后台页面。

💡考虑到后边的实战阶段为“用户端”项目，也因时间问题，本篇我们仅简单使用 Antd，在本篇的基础上，你完全可以自行拓展，熟练使用 Antd。

❗️为了便于讲解，我们先把之前的代码进行精简（ src 文件夹下只留一个 index.js “入口文件”，其他全部删除掉！）：

1️⃣正如上图看到的，“入口文件” index.js 里边引入了一个 TodoList 组件。故，我们去创建这个“组件”：

import React, {Component} from "react";

class TodoList extends Component {
  
  render() {
    return (
      <div>
        <div>
          Hello, qdywxs.
        </div>
      </div>
    )
  }
}

export default TodoList;

查看页面，页面没问题：

2️⃣接着，安装 Antd 这个 UI 框架，对 TodoList 做一个页面布局：

3️⃣安装完成后，在 TodoList.js 文件内引入“样式”：

import React, {Component} from "react";

import 'antd/dist/antd.css';

class TodoList extends Component {
  
  render() {
    return (
      <div>
        <div>
          Hello, qdywxs.
        </div>
      </div>
    )
  }
}

export default TodoList;

2 使用 Antd

4️⃣接着，去写我们想要的样式。 由于 Antd 里集成了很多 input 框的样式，我们可以在 Antd 官网直接搜索 Input 输入框 ：

5️⃣按照官网提示，在代码中引入 Input 组件并使用（我们演示“基本使用”的效果）：

import React, {Component} from "react";
import 'antd/dist/antd.css';

import { Input } from 'antd'; // 5️⃣-①：从 antd 引入 Input 组件；

class TodoList extends Component {
  
  render() {
    return (
      <div>
        <div>
          <Input placeholder="todo info" style={{width: "300px"}} />  
          {/*
           5️⃣-②：然后在 JSX 中直接用 Input 组件，并设置一下它的样式（宽度）。
           ❗️注意 Input 的大小写！
            */}

        </div>
      </div>
    )
  }
}

export default TodoList;

看看效果：

6️⃣同理，引入 Button 组件：

import React, {Component} from "react";
import 'antd/dist/antd.css';

import { Input, Button } from 'antd'; // 6️⃣-①：从 antd 引入 Button 组件；

class TodoList extends Component {
  
  render() {
    return (
      <div>
        <div>
          <Input placeholder="todo info" style={{width: "300px"}} /> 
					
					<Button type="primary">提交</Button>  
					{/* 6️⃣-②：然后在 JSX 中，复制官网的写法，使用 Button。 */}
					
        </div>
      </div>
    )
  }
}

export default TodoList;

看看效果：

让其显示的更好看点：

import React, {Component} from "react";
import 'antd/dist/antd.css';

import { Input, Button } from 'antd';  

class TodoList extends Component {
  
  render() {
    return (
      <div style={{marginTop: "10px", marginLeft: "10px"}}> {/* ❗️加点间距 */}
        <div>
          <Input placeholder="todo info" style={{width: "300px", marginRight: "10px"}} /> 
          
          <Button type="primary">提交</Button>  
          
        </div>
      </div>
    )
  }
}

export default TodoList;

看看效果：

7️⃣接下来，做出“列表项”的效果。 同理，在 Antd 官网搜索 List 列表 ，按照官网提示进行 LIst 组件的引入和使用：

import React, {Component} from "react";
import 'antd/dist/antd.css';

import { Input, Button, List } from 'antd'; // 7️⃣-①：首先引入 List 组件； 

// 7️⃣-②：按官网写法，去声明 data 常量（即，要显示在列表项中的内容）；
const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];


class TodoList extends Component {
  
  render() {
    return (
      <div style={{marginTop: "10px", marginLeft: "10px"}}>
        <div>
          <Input placeholder="todo info" style={{width: "300px", marginRight: "10px"}} /> 
          
          <Button type="primary">提交</Button>  

          {/* 7️⃣-③：直接复制官网写法（把没用的去掉），使用 List 组件： */}
          {/* 7️⃣-④：给 List 加点样式（间距、宽度），使其更好看些。 */}
          <List style={{marginTop: "10px", width: "300px"}} 

            bordered
            dataSource={data}
            renderItem={item => <List.Item>{item}</List.Item>}
          />
          {/*
           ❗️❗️❗️
           borderd 表示：这个列表有一个“边框”；
           dataSource 表示：这个列表到底要渲染什么内容（答：上边声明的 data 里的数据）；
           renderItem 表示：如何渲染（答：会将每条数据渲染成 List.item 这样的小组件，
           数据内容就是 data 里边每一项数据的内容）。
            */}    
          

        </div>
      </div>
    )
  }
}

export default TodoList;

看看最后的效果：

下一篇，我们就在本篇样式的基础上，去创建 Redux 中的 store。

祝好，qdywxs ♥ you！