封装的目的

当一个系统中有很多相似的组件时，封装一个无状态组件，然后将需要的方法和数据都抛出去，当外部需要此组件时，将组件中需要的方法利用父子组件传值的方式传进来。

提升开发效率

效果图

直接上代码吧

以数据驱动显示的方式，将数据进行抽取

import React from 'react'const Breadcrumb = [{id: '1',href: '',name: '1'},{id: '2',href: '',name: '2'}]const formList = [{type: 'INPUT',label: '关键词：',field: 'key',placeholder: '请输入关键词',initialValue: '',width: 60},{type: 'SELECT',label: '状态',field: 'order_status',placeholder: '全部',initialValue: '全部',width: 100,list: [{id: 0,name: '已上线'},{id: 1,name: '已下线'},{id: 2,name: '待审核'}]}]const table = {columns: [{title: 'Name',dataIndex: 'name',render: text => <a href="javascript:;">{text}</a>,sorter: true},{title: 'Age',dataIndex: 'age',sorter: true},{title: 'Address',dataIndex: 'address',sorter: true},{title: 'action',dataIndex: 'action',sorter: true}],data: [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'},{key: '4',name: 'Disabled User',age: 99,address: 'Sidney No. 1 Lake Park'}],Pagination:{defaultCurrent:1,pageSize:2}}export default {formList,Breadcrumb,table}

无状态组件的代码

import React from 'react'import {Input,Select,Form,Button,Breadcrumb,Icon,Menu,Dropdown,Table,Pagination} from 'antd'import SourceData from './AppData.js'import './App.css'const FormItem = Form.Itemconst Option = Select.Optionclass DataManage extends ponent {constructor(props) {super(props)}initBreadcrumb() {const breadCrumbList = this.props.Breadcrumb || SourceData.Breadcrumb || []const breadCrumbItemList = []if (breadCrumbList && breadCrumbList.length > 0) {breadCrumbList.forEach((item, i) => {let href = item.hreflet name = item.namelet key = item.idconst BreadcrumbItem = (<Breadcrumb.Item key={key}><a href={href}>name</a></Breadcrumb.Item>)breadCrumbItemList.push(BreadcrumbItem)})}return breadCrumbItemList}initFormList() {const { getFieldDecorator } = this.props.formconst formList = this.props.formList || SourceData.formList || []const formItemList = []if (formList && formList.length > 0) {formList.forEach((item, i) => {let label = item.labellet field = item.fieldlet initialValue = item.initialValue || ''let placeholder = item.placeholderlet width = item.widthif (item.type === 'INPUT') {const INPUT = (<FormItem label={label} key={field}>{getFieldDecorator([field], {initialValue: initialValue})(<Input type="text" placeholder={placeholder} />)}</FormItem>)formItemList.push(INPUT)} else if (item.type === 'SELECT') {const SELECT = (<FormItem label={label} key={field}>{getFieldDecorator([field], {initialValue: initialValue})(<Select syle={{ width: width }} placeholder={placeholder}>{this.getOptionList(item.list)}</Select>)}</FormItem>)formItemList.push(SELECT)}})}return formItemList}getOptionList(data) {if (!data) {return []}let options = [] //[<Option value="0" key="all_key">全部</Option>];data.map(item => {options.push(<Option value={item.id} key={item.id}>{item.name}</Option>)})return options}initTableList() {const tableData = this.props.tableData || SourceData.table || []let columns = tableData.columnslet dataSource = tableData.datalet Pagination = tableData.Paginationreturn {columns,dataSource,Pagination}}handleFiterSubmit() {let fieldsValue = this.props.form.getFieldsValue()this.props.filterSubmit(fieldsValue)}handleAddNewData() {this.props.addNewData()}handleVolumeIncrease(info) {this.props.volumeIncrease()}handleTableChange(pagination, filters, sorter, extra) {this.props.tableChange(pagination, filters, sorter, extra)}render() {const columns = this.initTableList().columnsconst data = this.initTableList().dataSourceconst Pagination = this.initTableList().Paginationconsole.log(Pagination)const menu = (<Menu onClick={this.handleVolumeIncrease}><Menu.Item key="downloadTemplate">下载模板</Menu.Item><Menu.Item key="upload">上传</Menu.Item></Menu>)const rowSelection = {onChange: (selectedRowKeys, selectedRows) => {console.log(`selectedRowKeys: ${selectedRowKeys}`,'selectedRows: ',selectedRows)}}return (<div className="container"><div class="con_breadcrumb"><Breadcrumb>{this.initBreadcrumb()}</Breadcrumb></div><Form layout="inline" id="con_form">{this.initFormList()}<FormItem><Buttontype="primary"style={{ margin: '0 20px' }}onClick={this.handleFiterSubmit}>查询</Button>{this.props.userPermissions ? 111 : ''}<Buttonstyle={{ margin: '0 10px' }}onClick={this.handleAddNewData}><Icon type="plus" />新增数据</Button><Dropdown overlay={menu}><Button>批量增加 <Icon type="down" /></Button></Dropdown></FormItem></Form><div><TablerowSelection={rowSelection}columns={columns}dataSource={data}pagination={Pagination}onChange={this.handleTableChange}/></div></div>)}}export default Form.create({})(DataManage)

css代码，可要可不要

.container {width: 100%;height: 100%;}.con_breadcrumb {padding: 10px 0 10px 20px;}#con_form {padding: 10px 0 10px 20px;}

以上就是所有的代码，具体无状态组件中暴露出去的方法有哪些，可以Ctrl+F进行搜索this.props进行查看。

欢迎大神指点。