react desin pro中的TableList页面代码分析

本文链接：https://blog.youkuaiyun.com/zhu_ya_nan/article/details/91552132

本文主要分析React Design Pro的TableList组件，包括组件类的render方法、页面结构、面包屑导航、卡片元素和表单操作。文章详细讨论了state的管理，如expandForm的初始状态，以及handleSearch方法、connect函数、action和reducer的角色，阐述了如何通过dispatch更新state，并解释了Store在状态管理中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先是TableList这个类，相当于一个组件类。

2、组件类，页面显示找到方法render(){}这个方法。

3、针对render()里面的return()是整个页面的显示。

4、<PageHeaderWrapper title="查询表格"></PageHeaderWrapper>引入面包屑，加入标题对应页面的查
询表格。

5、<Card bordered={false}></Card>。

6、三个<div>标签：
a): 首先是一个大的div， <div className={styles.tableList}></div>，这是把TableList.less中的样式加进来；
b): 嵌入的第一个div， <div className={styles.tableListForm}> {this.renderForm()}</div>，这个div会调用this.renderForm()这方法，这个方法就是TableList中定义的一个方法

  renderForm() {
    const { expandForm } = this.state;//其中这一句代表着获取state中的expandForm属性的值
     //如果expandForm这个值为false时候，将加载this.renderSimpleForm()这个方法
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

在TableList中定义了一个state这个对象，并且初始化一些参数值，由此可以知道 expandForm: false,初始化为false;

class TableList extends PureComponent {
  state = {
    modalVisible: false,
    updateModalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    stepFormValues: {},
  };
}

c)：当expandForm:的值为false的时候，就会执行这个方法this.renderSimpleForm();

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={
  { md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="规则名称">
              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="使用状态">
              {getFieldDecorator('status')(
                <Select placeholder="请选择" style={
  { width: '100%' }}>
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>