react-ant-design组件封装抽取之表格页面封装举例（组件封装方法）

1、 需要封装的组件包括两个下拉框，一个搜索框，和一个表格列表
2、封装的组件代码

import React, { Component, Fragment } from 'react';
import { Card, Select, Input, Table } from 'antd';
import { constants } from '../../../utils/constants';
import DataUtils from '../../../utils/dataUtils';
import styles from './TableList.less';

//封装组件的思想就是当被应用时，所有的数据和方法都由父组件中获取调用
// （this.props）
const { Option } = Select;
const { Search } = Input;

export default class TableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  // 改变报名状态
  // 被调用的组件叫做子组件 引用这个组件的叫做父组件
  // 这里的方法由父组件中传入
  handleChangeRegistrationState = (value) => {
  // 从this.props 中拿到这个方法 也就是父组件中的这个方法 
    const { handleChangeRegistrationState } = this.props;
  // 然后进行调用这个这个方法
    handleChangeRegistrationState(value);
  }
  

  // 改变报名类型
  handleChangeRegistrationType = (value) => {
    const { handleChangeRegistrationType } = this.props;
    handleChangeRegistrationType(value);
  }

  // 搜索报名名称
  handleSearchRegistrationName = (value) => {
    const { handleSearchRegistrationName } = this.props;
    handleSearchRegistrationName(value);
  }

// 这里的写法是当有多个列表不同时进行通用渲染时使用，当所有的页面是相同的时候就没有必要这个写，
// 直接方到下面的render中去
  renderTableFormList() {
    // 从工具类中获取状态列表
    const { state, TypeId } = this.props;
    const registrationStateList = constants.registrationState;
    const TypeIdList = constants.registrationType;
    return (
      <Fragment>
        <span style={{ marginLeft: "10px", }}>状态&nbsp;&nbsp;
          <Select defaultValue={state} style={{ color: '#0099FF', width: '150px' }} onChange={this.handleChangeRegistrationState}>
          // 这里的list是我在一个工具类中定义好的一些状态值 ，直接取出使用
            {registrationStateList.map((item, idx) => {
              return (
                <Option value={idx} key={DataUtils.generateKey(idx)}>{item}</Option>
              )
            })}
          </Select>
        </span>
        <span style={{ marginLeft: "20px", }}>类型&nbsp;&nbsp;
          <Select defaultValue={TypeId} style={{ color: '#0099FF', width: '150px' }} onChange={this.handleChangeRegistrationType}>
            {TypeIdList.map((item, idx) => {
              return (
                <Option value={idx} key={DataUtils.generateKey(idx)}>{item}</Option>
              )
            })}
          </Select>
        </span>
        <span>
          <Search 
            placeholder="输入报名名称、主办单位搜索"
            style={{ width: 300, marginLeft: "30px" }}
            onSearch={this.handleSearchRegistrationName}
          />
        </span>
      </Fragment>
    )
  }

  render() {
    const { columns, dataSource, roleList, pageParameter, handlePageOnChange } = this.props;
    const pagination = {
      total: pageParameter.total,
      pageSize: pageParameter.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) => <span style={{ position: 'absolute', left: '0', color: '#929292' }}>共 {total} 条记录 第 {pageParameter.current} / {pageParameter.totalPage} 页</span>,
    }
    return (
      <Fragment>
        <Card style={{ marginTop: "64px", borderRadius: "3px" }}>
          {roleList === 'TableFormList' && this.renderTableFormList()}
          <div style={{ marginTop: '20px' }}>
            <Table
              style={{ marginTop: "20px", marginLeft: "20px" }}
              columns={columns}
              dataSource={dataSource}
              pagination={pagination}
              onChange={handlePageOnChange}
              rowClassName={styles.onRowHover}
            />
          </div>
        </Card>
      </Fragment>
    );
  }
}

3、在组件中调用（父组件）

• 使用子组件，你需要知道，子组件中所有的变量值都需要由父组件传入
• 从父组件拿值就像是从接口拿值一样 从this.props中拿值
• 
• 然后这些值都由父组件传入
• 
  4、关于父子组件中方法的传入使用再举一个非常简单易懂的例子
• 子组件绑定handleBack方法
  
• 在子组件写

  handleBack = () => {
    const { handleBack } = this.props;
    //意思是这个方法要从父组件中去获取
    handleBack();
    //使用这个方法
  }

• 在父组件
  写好这个方法

  // 返回
  handleBack = () => {
    const { history } = this.props;
    history.goBack();
  }

• 将这个方法传入子组件