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

我试图将类组件转换为函数组件，因为我的代码主要基于函数组件

我知道如何更改其他更常见的东西，如状态和函数，但这两段代码我不太确定如何转换。但我不知道如何重置列

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';

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>
  );
};

class Demo extends React.Component {
  state = {
    columns: [
      {
        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>,
      },
    ],
  };

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

  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',
    },
  ];

  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} />;
  }
}

ReactDOM.render(<Demo />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Table}；
从“react Resizeble”导入{Resizeable}；
const resizeblettle=props=>{
const{onResize，width，…restProps}=props；
如果（！宽度）{
返回；
}
返回(
}
onResize={onResize}
DragableOpts={{enableUserSelectHack:false}
>
);
};
类Demo扩展了React.Component{
状态={
栏目：[
{
标题：“日期”，
数据索引：“日期”，
宽度：200，
},
{
标题：“金额”，
dataIndex:'金额'，
宽度：100，
分拣机：（a，b）=>a.数量-b.数量，
},
{
标题：“类型”，
数据索引：“类型”，
宽度：100，
},
{
标题：“注”，
dataIndex:'注意'，
宽度：100，
},
{
标题：“行动”，
关键：“行动”，
呈现：（）=>删除，
},
],
};
组件={
标题：{
单元格：可调整大小，
},
};
数据=[
{
关键字：0，
日期：“2018-02-11”，
金额：120，
类型：'收入'，
注：“转让”，
},
{
重点:1,，
日期：“2018-03-11”，
金额：243，
类型：'收入'，
注：“转让”，
},
{
重点:二,，
日期：“2018-04-11”，
金额：98，
类型：'收入'，
注：“转让”，
},
];
handleResize=index=>（e，{size}）=>{
this.setState（（{columns}）=>{
const nextColumns=[…列]；
下一列[索引]={
…下一列[索引]，
宽度：size.width，
};
返回{columns:nextColumns}；
});
};
render（）{
const columns=this.state.columns.map（（列，索引）=>({
…上校，
onHeaderCell:列=>({
宽度：column.width，
onResize:this.handleResize（索引），
}),
}));
返回；
}
}
ReactDOM.render（，document.getElementById（'container'））；

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

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import { Resizable } from "react-resizable";

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>
  );
};

function Demo() {
  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 }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width
      };
      return { columns: nextColumns };
    });
  };

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

    <Table
      bordered
      components={components}
      columns={columns}
      dataSource={data}
    />
  );
}

ReactDOM.render(<Demo />, document.getElementById("container"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Table}；
从“react Resizeable”导入{Resizeable}；
const resizeblettle=props=>{
const{onResize，width，…restProps}=props；
如果（！宽度）{
返回；
}
返回(
}
onResize={onResize}
DragableOpts={{enableUserSelectHack:false}
>
);
};
函数Demo（）{
const[columns，setColumns]=useState([
{
标题：“日期”，
数据索引：“日期”，
宽度：200
},
{
标题：“金额”，
数据索引：“金额”，
宽度：100，
分拣机：（a，b）=>a.数量-b.数量
},
{
标题：“类型”，
数据索引：“类型”，
宽度：100
},
{
标题：“注”，
数据索引：“注意”，
宽度：100
},
{
标题：“行动”，
关键：“行动”，
渲染：（）=>删除
}
]);
常数分量={
标题：{
单元格：可调整大小
}
};
常数数据=[
{
关键字：0，
日期：“2018-02-11”，
金额：120，
类型：“收入”，
注：“转让”
},
{
重点:1,，
日期：“2018-03-11”，
金额：243，
类型：“收入”，
注：“转让”
},
{
重点:二,，
日期：“2018-04-11”，
金额：98，
类型：“收入”，
注：“转让”
}
];
常量handleResize=index=>（e，{size}）=>{
this.setState（（{columns}）=>{
const nextColumns=[…列]；
下一列[索引]={
…下一列[索引]，
宽度：size.width
};
返回{columns:nextColumns}；
});
};
返回(
//const columns=this.state.columns.map（（列，索引）=>({
//…上校，
//onHeaderCell:列=>({
//宽度：column.width，
//onResize:this.handleResize（索引），
//   }),
// }));
);
}
render（，document.getElementById（“容器”）；

请在问题中包含所有代码。不在链接后面。看看如何做一个小游戏。还请解释你所说的“现在不工作”是什么意思。什么不起作用？