将dva中的组件写法转换成class的形式

我们在使用蚂蚁金服的Ant Design做项目，有时候会使用他封装的dva整套使用，但是有些朋友习惯使用class的方式进行编写组件，而并不是喜欢其他方式来进行开发，那么前些天就有同事问道我如何将dva中的组件写法换成class，那么我先附上默认的组件写法

const Footer = ({ onDelete, onClose, products }) => {
  const columns = [{    
    title: '标题',
    dataIndex: 'name',
  }, 
  {
    title: '描述',
    dataIndex: 'desc'
  }, 
  {
    title: '操作',
    render: (text, record ) => {
      return (
        <div>
          <Popconfirm title="确定删除?" onConfirm={() => onDelete(record.id)}>
            <Button>删除</Button>
          </Popconfirm>
          <span style={{margin: '0 0.5rem'}}></span>
          <Popconfirm title="确定关闭?" onConfirm={() => onClose(record.id)}>
            <Button type="primary">关闭</Button>
          </Popconfirm>

          </div>
        );
      }
    }];
    return (
      <div>
        <Table
          dataSource={products}
          columns={columns}
        />
        <FormItem
          {...formItemLayout}
          label="我是标题"
          hasFeedback
          validateStatus="success"
        >
          <Input placeholder="请输入你的内容" id="success" />
        </FormItem>
      </div>
  );
}

确实，这种写法很多人不是很情况，那么如果要更改成class的写法就用下面这种即可，其实了解原理即可。

class Footer extends Component{
  constructor() {
    super()
    this.columns = [{    
      title: '标题',
      dataIndex: 'name',
    }, 
    {
      title: '描述',
      dataIndex: 'desc'
    }, 
    {
      title: '操作',
      render: (text, record ) => {
        return (
          <div>
            <Popconfirm title="确定删除?" onConfirm={() => this.props.onDelete(record.id)}>
              <Button>删除</Button>
            </Popconfirm>
            <span style={{margin: '0 0.5rem'}}></span>
            <Popconfirm title="确定关闭?" onConfirm={() => this.props.onClose(record.id)}>
              <Button type="primary">关闭</Button>
            </Popconfirm>
  
            </div>
          );
        }
      }];
  }
  render() {
    return (
      <div>
        <Table
          dataSource={this.props.products}
          columns={this.columns}
        />
        <FormItem
          {...formItemLayout}
          label="我是标题"
          hasFeedback
          validateStatus="success"
        >
          <Input placeholder="请输入你的内容" id="success" />
        </FormItem>
      </div>
    );
  }
}

你只需要把第一部分的代码更改成第二部分的代码即可。