React_Redux_使用Antd实现TodoList页面布局_ZHOU125disorder_

最新推荐文章于 2023-05-20 00:00:16 发布

zjing125

最新推荐文章于 2023-05-20 00:00:16 发布

阅读量176

点赞数

分类专栏： # 前端框架 React学习文章标签： React Redux Antd

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/115374548

版权

前端框架 React学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

`Antd`

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

`安装`

使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install antd --save
$ yarn add antd

如果你的网络环境不佳，推荐使用 cnpm
cnpm

1.`引入样式：`

引入Ant Design的css样式的文件

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

2.`引入控件`

import { Input } from 'antd';

在render中使用即可:

  render() {
    return (
      <Fragment>
        <Input />
      </Fragment>
    )
  }

全部代码

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

  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{
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Fragment>
        <Input style={{width:"300px"}}/>
        <Button type="primary">Primary Button</Button>
          <List
          bordered
          dataSource={data}
          renderItem={item => (
        <List.Item>
          {item}
        </List.Item>
      )}
    />
      </Fragment>
    )
  }
}

export default TodoList;