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

Question

我正在尝试将类组件转换为功能组件，因为我的代码主要基于功能组件。

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

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',
      width: 100,
    },
    {
      title: 'Note',
      dataIndex: 'note',
      width: 100,
    },
    {
      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,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 2,
      date: '2018-04-11',
      amount: 98,
      type: 'income',
      note: 'transfer',
    },
  ];

  const handleResize = (index) => (e, { size }) => {
    setColumns(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      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;

Answer 1

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

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

    setColumns(nextColumns);
  };

如果有更好的方法来修复/改进它们，请告诉我。提前致谢！