纪录一些react-antd公共组件demo

import React, { Component } from ‘react‘;

import {

Form,

Input,

Button,

Row,

Select,

Icon,

Radio,

Checkbox,

Table,

Pagination,

Card,

Tabs,

Upload,

message,

} from ‘antd‘;

import { connect } from ‘dva‘;

import styles from ‘./index.less‘;

import StandardCard from ‘@/components/StandardCard‘;

const { Option } = Select;

const { TabPane } = Tabs;

// const CheckboxGroup = Checkbox.Group;

@connect(({ fileModal }) => ({

fileModal,

}))

@Form.create()

class chipStyles extends Component {

state = {

total: 500,

current: 1,

pageSize: 10,

current1: 1,

pageSize1: 10,

afterIcon: <Icon type="edit" />,

fileList: [],

uploading: false,

};

inputChange = e => {

const { value } = e.target;

if (value !== ‘‘ && value !== undefined) {

this.setState({

afterIcon: <Icon type="check-circle" theme="filled" />,

});

} else {

this.setState({

afterIcon: <Icon type="edit" />,

});

}

};

handleUpload = () => {

const { dispatch } = this.props;

const { fileList } = this.state;

this.setState({

uploading: true,

});

dispatch({

type: ‘fileModal/upload‘,

payload: {

files: fileList,

},

callback: resp => {

if (resp && resp.sucess) {

this.setState({

fileList: [],

uploading: false,

});

message.destroy();

message.success(‘上传成功‘);

} else {

this.setState({

uploading: false,

});

message.destroy();

message.error(‘上传失败‘);

}

},

});

};

// 上传

renderUpload = () => {

const { uploading, fileList } = this.state;

const props = {

onRemove: file => {

this.setState(state => {

const index = state.fileList.indexOf(file);

const newFileList = state.fileList.slice();

newFileList.splice(index, 1);

return {

fileList: newFileList,

};

});

},

beforeUpload: file => {

this.setState(() => ({

// fileList: [...state.fileList, file],

fileList: [file], // 只上传一个文件

}));

return false;

},

fileList,

};

return (

<div style={{ marginTop: 32 }}>

<Upload {...props}>

<Button>

<Icon type="upload" /> 选择文件

</Button>

</Upload>

<Button

type="primary"

onClick={this.handleUpload}

disabled={fileList.length === 0}

loading={uploading}

style={{ marginTop: 16 }}

>

{uploading ? ‘上传中‘ : ‘开始上传‘}

</Button>

</div>

);

};

render() {

const { selectedKeys } = this.state;

const rowSelection = {

selectedRowKeys: selectedKeys,

onChange: selectedRowKeys => {

this.setState({

// selecItems: selectedRows,

selectedKeys: selectedRowKeys,

});

},

};

const columns = [

{

title: ‘表头A‘,

dataIndex: ‘name1‘,

},

{

title: ‘表头B‘,

dataIndex: ‘name2‘,

},

{

title: ‘表头C‘,

dataIndex: ‘name3‘,

},

];

const { total, current, pageSize, current1, pageSize1, afterIcon } = this.state;

const itemRender = (curr, type, originalElement) => {

// console.log(curr);

if (type === ‘prev‘) {

return <a>上一页</a>;

}

if (type === ‘next‘) {

return <a>下一页</a>;

}

return originalElement;

};

const tableData = [

{

key: 1,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 2,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 3,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 4,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 5,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 6,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 7,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 8,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 9,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 10,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 11,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 12,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 13,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 14,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 15,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

{

key: 16,

name1: ‘显示内容‘,

name2: ‘显示内容‘,

name3: ‘显示内容‘,

},

];

return (

<div>

<p>1.按钮样式</p>

<Row span={24} className={styles.btn_box}>

<Button type="primary" className="multicolor_btn">

按钮1

</Button>

<Button type="primary" className="blue_btn">

按钮2

</Button>

<Button type="primary" className="red_btn">

按钮3

</Button>

<Button type="primary" className="green_btn">

按钮4

</Button>

<Button type="primary" className="pithy_btn">

按钮5

</Button>

</Row>

<p>2.输入框样式</p>

<Row span={24}>

<Input placeholder="请输入" style={{ width: ‘300px‘ }} />

</Row>

<Row span={24}>

<Input

placeholder="请输入"

style={{ width: ‘300px‘ }}

suffix={afterIcon}

onChange={this.inputChange}

/>

</Row>

<p>3.选择框样式</p>

<Row span={24}>

<Select

showSearch

style={{ width: 200 }}

placeholder="请选择"

suffixIcon={<Icon type="caret-down" />}

>

<Option value="jack">Jack</Option>

<Option value="lucy">Lucy</Option>

<Option value="tom">Tom</Option>

</Select>

</Row>

<p>4.单选样式</p>

<Row span={24}>

<Radio.Group name="radiogroup" defaultValue={1}>

<Radio value={1}>A</Radio>

<Radio value={2}>B</Radio>

<Radio value={3}>C</Radio>

<Radio value={4}>D</Radio>

</Radio.Group>

</Row>

<p>5.多选样式</p>

<Row span={24}>

<Checkbox.Group>

<Checkbox value="A">A</Checkbox>

<Checkbox value="B">B</Checkbox>

<Checkbox value="C" disabled>

C

</Checkbox>

<Checkbox value="D" disabled>

D

</Checkbox>

</Checkbox.Group>

</Row>

<p>6.表格样式</p>

<Row span={24}>

<Table

rowSelection={rowSelection}

dataSource={tableData}

columns={columns}

bordered

pagination={{

pageSize: pageSize1,

current: current1,

showSizeChanger: true,

showQuickJumper: { goButton: <Button>确定</Button> },

itemRender,

total: tableData.length,

showTotal: totals => {

return (

<span>

当前：第<font>{current1}</font>

<font>/</font>

<font>{Math.ceil(Number(totals) / Number(pageSize1))}</font>

页&nbsp;&nbsp;共

<font>{totals}</font>条记录&nbsp;&nbsp;每页

<font>{pageSize1}</font>条

</span>

);

},

onChange: (page, size) => {

this.setState({

current1: page,

pageSize1: size,

});

},

onShowSizeChange: (page, size) => {

this.setState({

current1: page,

pageSize1: size,

});

},

}}

/>

</Row>

<p>7.翻页样式</p>

<Row span={24}>

<Pagination

pageSize={pageSize}

current={current}

showSizeChanger

showQuickJumper={{ goButton: <Button>确定</Button> }}

itemRender={itemRender}

total={total}

showTotal={totals => {

return (

<span>

当前：第<font>{current}</font>

<font>/</font>

<font>{Math.ceil(Number(totals) / Number(pageSize))}</font>

页&nbsp;&nbsp;共

<font>{totals}</font>条记录&nbsp;&nbsp;每页

<font>{pageSize}</font>条

</span>

);

}}

onChange={(page, size) => {

this.setState({

current: page,

pageSize: size,

});

}}

onShowSizeChange={(page, size) => {

this.setState({

current: page,

pageSize: size,

});

}}

/>

</Row>

<Card className="card_container" title="123" style={{ marginTop: 32 }}>

test

</Card>

<Tabs type="card" style={{ marginTop: 32 }}>

<TabPane tab="Tab 1" key="1">

Content of Tab Pane 1

</TabPane>

<TabPane tab="Tab 2" key="2">

Content of Tab Pane 2

</TabPane>

<TabPane tab="Tab 3" key="3">

Content of Tab Pane 3

</TabPane>

</Tabs>

<StandardCard src="./assets/common/peizhi.png" style={{ marginTop: 32 }}>

{/*  RouterCard */}

<StandardCard.Meta title="StandardCard.Meta" />

{/*  高度为内容高度 */}

</StandardCard>

<StandardCard src="./assets/common/peizhi.png" style={{ marginTop: 32 }} full>

{/*  RouterCard */}

<StandardCard.Meta

title="StandardCard.Meta"

titleStyle={{ color: ‘red‘, fontSize: 22 }}

/>

{/*  高度占满 */}

</StandardCard>

{this.renderUpload()}

</div>

);

}

}

export default chipStyles;

// 面包屑 StandardCard公共组件代码 

CommonCard.js

import React from ‘react‘;

import { Card } from ‘antd‘;

import classnames from ‘classnames‘;

import styles from ‘./index.less‘;

const Meta = ({ title, titleStyle, className, src, ...rest }) => {

const titleNode = (

<div className={styles.metaTitleContainer}>

<div />

<span style={titleStyle}>{title}</span>

</div>

);

const cls = classnames(styles.meta, className);

return <Card.Meta className={cls} title={titleNode} {...rest} />;

};

export default Meta;

CommonTitle.js

import React from ‘react‘;

import styles from ‘./index.less‘;

const CommonTitle = ({ src, title }) => {

return (

<div className={styles.title}>

{src && <img src={src}  />}

{title}

</div>

);

};

export default CommonTitle;

index.js

import React from ‘react‘;

import CommonCard from ‘./CommonCard‘;

import RouterCard from ‘./RouterCard‘;

import Meta from ‘./Meta‘;

import RouterTitle from ‘./RouterTitle‘;

import CommonTitle from ‘./CommonTitle‘;

const StandardCard = ({ showTitle, ...rest }) => {

return showTitle ? <CommonCard {...rest} /> : <RouterCard {...rest} />;

};

StandardCard.RouterTitle = RouterTitle;

StandardCard.CommonTitle = CommonTitle;

StandardCard.Meta = Meta;

export default StandardCard;

/**

* full属性： 卡片最小宽度是否占满屏幕，默认：false

* eg:

* 顶部显示自定义内容

* <StandardCard src=‘./assets/common/peizhi.png‘ title=‘你好/你好‘ showTitle>

*    内容

* </StandardCard>

*

* 顶部显示路由内容

* <StandardCard src=‘./assets/common/peizhi.png‘>

*    内容

* </StandardCard>

*/

index.less

@import ‘~antd/lib/style/themes/default.less‘;

.cardFull {

min-height: 100%;

}

.title {

display: flex;

align-items: center;

font-size: 16px;

color: @primary-color;

font-weight: bold;

img {

width: 30px;

height: 30px;

margin-right: 6px;

}

:global {

.ant-breadcrumb {

font-size: 16px !important;

a {

color: @primary-color !important;

}

span {

color: @primary-color !important;

}

}

}

}

.meta {

margin-top: 30px;

margin-bottom: 20px;

}

.metaTitleContainer {

display: flex;

flex-direction: row;

align-items: center;

div {

width: 5px;

height: 18px;

border-radius: 3px;

background-color: @primary-color;

margin-right: 8px;

}

span {

color: @primary-color;

font-size: 16px;

}

}

Meta.js

import React from ‘react‘;

import { Card } from ‘antd‘;

import classnames from ‘classnames‘;

import styles from ‘./index.less‘;

const Meta = ({ title, titleStyle, className, src, ...rest }) => {

const titleNode = (

<div className={styles.metaTitleContainer}>

<div />

<span style={titleStyle}>{title}</span>

</div>

);

const cls = classnames(styles.meta, className);

return <Card.Meta className={cls} title={titleNode} {...rest} />;

};

export default Meta;

RouterCard.js

import React from ‘react‘;

import { withRouter } from ‘umi‘;

// import Link from ‘umi/link‘;

import { Card } from ‘antd‘;

import classnames from ‘classnames‘;

import RouterTitle from ‘./RouterTitle‘;

import styles from ‘./index.less‘;

const RouterCard = ({ src, children, className, full, staticContext, ...rest }) => {

const titleEle = <RouterTitle src={src} />;

let cls = classnames(‘card_container‘, className);

if (full) {

cls = classnames(cls, styles.cardFull);

}

return (

<Card className={cls} {...rest} title={titleEle}>

{children}

</Card>

);

};

export default withRouter(RouterCard);

/**

* eg:

* <StandardCard src=‘./assets/common/peizhi.png‘>

*    内容

* </StandardCard>

*/

RouterTitle.js

import React from ‘react‘;

// import Link from ‘umi/link‘;

import { Breadcrumb } from ‘antd‘;

import { conversionBreadcrumbList } from ‘@/components/PageHeaderWrapper/breadcrumb‘;

import MenuContext from ‘@/layouts/MenuContext‘;

import styles from ‘./index.less‘;

const RouterTitle = ({ src }) => {

return (

<MenuContext.Consumer>

{value => {

const breadcrumbList = conversionBreadcrumbList({ ...value });

const extraBreadcrumbItems = breadcrumbList.routes.map(item => {

const href= item.hideInMenu ? `#${item.path}` : ‘‘

const ps = {

key: item.path

}

if (href) {

ps.href = href

}

return (

<Breadcrumb.Item {...ps}>

<span>{item.breadcrumbName}</span>

</Breadcrumb.Item>

)

});

const breadcrumbItems = extraBreadcrumbItems;

// const breadcrumbItems = [

//   <Breadcrumb.Item key=‘home‘>

//     <Link to=‘/home‘>Home</Link>

//   </Breadcrumb.Item>,

// ].concat(extraBreadcrumbItems)

return (

<div className={styles.title}>

{src && <img src={src} />}

<Breadcrumb>{breadcrumbItems}</Breadcrumb>

</div>

);

}}

</MenuContext.Consumer>

);

};

export default RouterTitle;

原文地址：https://www.cnblogs.com/jinchi/p/11497304.html

时间： 2024-11-01 17:05:47

纪录一些react-antd公共组件demo的相关文章

react初探（二）之父子组件通信、封装公共组件

一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心.如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁.这样做会需要使用到父子组件之间的通信,下面会详细解释. 场景二:日常项目中我们会经常遇到某一个功能会在不同地方使用,但是每次使用的

十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1.在项目根目录安装antd[每个项目都安装一次]: npm install antd --save / yarn add antd / cnpm install antd --save 2.在您的react项目的css文件中引入Antd的css[会引入所有css样式]: @import '

React和Vue组件间数据传递demo

一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <div className="App"> <Child msg="来自父元素的问候"/> </div> ); } } /* Child */ class Child extends Component { render() { return

记一次webpack4+react+antd项目优化打包文件体积的过程

背景 最近自己整了一个基于webpack4和react开发的博客demo项目,一路整下来磕磕碰碰但也实现了功能,就准备发到阿里云上面去看看,借用了同事的阿里云小水管服务器,配置完成之后首页加载花了十几秒,打开控制台network查看资源,打包的js体积有将近6M,及其影响访问体验,于是就开始了优化的路. 原因和解决方法 在webpack的配置文件中,对公共js做了抽取,分别会打包出react-verdor.js和antd-verdor.js,优化前的antd-verdor足足有4m大小,估计是把

webpack+react+antd 单页面应用实例

webpack+react+antd 单页面应用实例 React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给

React jQuery公用组件celling的实现

目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在提,原来的开发中也会抽一些公共的模块出来.但是react带来的思想冲击是革命性的,套用一句可能不太合适的话来,描述:万事万物皆组件,在这种思想的影响下,不管什么框架都可以抽一些公共的模块出来,应该秉持一种心态:任何代码都尽量不要重复写两遍,如果存在那么就可以考虑封装起来作为组件.当然不是一味的提倡盲

react.js table组件【可以直接使用】

最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上菜:

公共组件的抽取-page-title

我们在开发的时候,难免遇到公共组件的开发,这时为了复用,可以开发一个公共的模块,那么react怎么开发公共组件呢? 需求: 开发公共的page-title组件 1.静态模版先写好(html+css) <div classname="row"> <div classname="col-md-12"> <h1 classname="page-title">首页</h1> </div> <

几款简单的 React Native UI 组件

本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理控件 tcomb-form-native tcomb-form-native 是 React Native 强大的表单处