将AntD可调整大小的表转换为使用功能组件

问题描述

由于我的代码主要基于功能组件，因此我试图将类组件转换为功能组件。

我知道如何更改其他更常见的内容，例如状态和功能，但是我不太确定如何转换这两个代码块。更改之后，现在无法确定可调整大小的功能。

handleResize = index => (e,{ size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],width: size.width,};
      return { columns: nextColumns };
    });
  };

  render() {
    const columns = this.state.columns.map((col,index) => ({
      ...col,onHeaderCell: column => ({
        width: column.width,onResize: this.handleResize(index),}),}));

    return <Table bordered components={this.components} columns={columns} dataSource={this.data} />;
  }
}

这是在我尝试更改代码之后。感谢您的帮助！

import React,{ useState } from 'react';
import './AccountPortfolio.scss';
import HeaderTitle from '../../../components/HeaderTitle/HeaderTitle';
import Footer from '../../../components/Footer/Footer';
import Sidebar from '../../../components/Navigation/Sidebar/Sidebar';
import HeaderComponent from '../../../components/Navigation/HeaderComponent/HeaderComponent';
import { Layout,Table,Breadcrumb } from 'antd';
import { Resizable } from 'react-resizable';
// import 'react-resizable/css/styles.css';

const ResizableTitle = (props) => {
  const { onResize,width,...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span
          className="react-resizable-handle"
          onClick={(e) => {
            e.stopPropagation();
          }}
        />
      }
      onResize={onResize}
      draggableOpts={{ enableuserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

const { Content } = Layout;
function AccountPortfolioPage(props) {
  const [columns,setColumns] = useState([
    {
      title: 'Date',dataIndex: 'date',width: 200,},{
      title: 'Amount',dataIndex: 'amount',width: 100,sorter: (a,b) => a.amount - b.amount,{
      title: 'Type',dataIndex: 'type',{
      title: 'Note',dataIndex: 'note',{
      title: 'Action',key: 'action',render: () => <a>Delete</a>,]);

  const components = {
    header: {
      cell: ResizableTitle,};

  const data = [
    {
      key: 0,date: '2018-02-11',amount: 120,type: 'income',note: 'transfer',{
      key: 1,date: '2018-03-11',amount: 243,{
      key: 2,date: '2018-04-11',amount: 98,];

  const handleResize = (index) => (e,{ size }) => {
    setColumns(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],};
      return { columns: nextColumns };
    });
  };

  const columnsData = columns.map((col,index) => ({
    ...col,onHeaderCell: (column) => ({
      width: column.width,onResize: handleResize(index),}));

  return (
    <>
      <Layout className="antsidebar__layout">
        <Sidebar defaultSelectedKeys="Account Portfolio" />
        <Layout className="antsidebar__site-layout">
          <HeaderComponent />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>MMS</Breadcrumb.Item>
              <Breadcrumb.Item>Account Portfolio</Breadcrumb.Item>
            </Breadcrumb>
            <div className="antsidebar__site-layout-background">
              <HeaderTitle headerText="Account Portfolio" />
              <Table bordered components={components} columns={columnsData} dataSource={data} />
            </div>
            <Footer />
          </Content>
        </Layout>
      </Layout>
    </>
  );
}

export default AccountPortfolioPage;

解决方法

好的，我不知道这是否是正确的方法，但是在我将句柄调整大小功能更改为此之后，它现在可以正常工作

  const handleResize = (index) => (e,{ size }) => {
    const nextColumns = [...columns];
    nextColumns[index] = {
      ...nextColumns[index],width: size.width,};

    setColumns(nextColumns);
  };

让我知道是否有更好的方法来修复/改进它们。预先感谢！