使用Antd实现TodoList页面布局

最新推荐文章于 2023-09-06 23:51:56 发布

fanxiao_168

最新推荐文章于 2023-09-06 23:51:56 发布

阅读量722

点赞数

分类专栏： React 文章标签： and

本文链接：https://blog.csdn.net/weixin_42206243/article/details/96012307

版权

本文介绍如何利用Antd这个React组件库来构建TodoList页面。内容包括antd的简介，安装步骤，以及如何参考官方文档进行应用。还提到了需要安装Redux来辅助管理状态。

摘要由CSDN通过智能技术生成

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品
安装antd
```
  $ yarn add antd
```
使用方法参考官网
https://ant.design/docs/react/introduce-cn

效果图：
在这里插入图片描述
4. 代码
TodoList.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'; 
import { Input , Button , List  } from 'antd';

const data = [
   'Ant Design Title 1',
   'Ant Design Title 2',
   'Ant Design Title 3',
   'Ant Design Title 4',
];

class TodoList  extends Component {

	render(){
		return (
			<div style={
  {marginTop:'10px',marginLeft:'10px'}}>
				<div>
					<Input placeholder="todo info"  style=