Reactjs 使用react可调整大小的包装器和antd表格弄乱了样式-如何修复？

我实际上使用了react Resizeble，也尝试了re Resizeble，它们似乎用一个div来包装表行，这实际上弄乱了antd表的样式

有没有一种方法，我可以修复它，这样它就不会弄乱样式，或者可以做一些事情，这样它就可以调整大小，而不必在行周围环绕一个div

这是密码

import React from 'react';
import { Table } from "antd";
import { Resizable } from "react-resizable";
import { Resizable as Resizer } from "re-resizable";

import ReactDragListView from "react-drag-listview";
import 'antd/dist/antd.css';
import './reactabulatorrStyles.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 style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

const ResizableRow = (props) => {
  const { onResize, width, height, ...restProps } = props;
  // if (!height) {
  //   return <tr {...restProps} />;
  // }

  return (
    <Resizer
    // style={style}
    defaultSize={{
      width: 90,
      height: 90
    }}
    
    >
      <td {...restProps} />
    </Resizer>
  );
}

class ReactTabulator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [
        {
          title: <span className="dragHandler">Key</span>,
          dataIndex: "key",
          render: (text) => <span>{text}</span>,
          width: 50
        },
        {
          title: <span className="dragHandler">Name</span>,
          dataIndex: "name",
          width: 200
        },
        {
          title: <span className="dragHandler">Gender</span>,
          dataIndex: "gender",
          width: 100
        },
        {
          title: <span className="dragHandler">Age</span>,
          dataIndex: "age",
          width: 100
        },
        {
          title: <span className="dragHandler">Address</span>,
          dataIndex: "address",
          width:200
        }
      ]
    };

    const that = this;
    this.dragProps = {
      onDragEnd(fromIndex, toIndex) {
        const columns = [...that.state.columns];
        const item = columns.splice(fromIndex, 1)[0];
        columns.splice(toIndex, 0, item);
        that.setState({
          columns
        });
      },
      nodeSelector: "th",
      handleSelector: ".dragHandler",
      ignoreSelector: "react-resizable-handle"
    };

    this.dragRowProps = {
      onDragEnd(fromIndex, toIndex) {
        
      },
      nodeSelector:"tr",
      handleSelector:".dragHandler",
      ignoreSelector: "react-resizable-handle"
    }
  }

 

  data = [
    {
      key: "1",
      name: "Boran",
      gender: "male",
      age: "12",
      address: "New York"
    },
    {
      key: "2",
      name: "JayChou",
      gender: "male",
      age: "38",
      address: "TaiWan"
    },
    {
      key: "3",
      name: "Lee",
      gender: "female",
      age: "22",
      address: "BeiJing"
    },
    {
      key: "4",
      name: "ChouTan",
      gender: "male",
      age: "31",
      address: "HangZhou"
    },
    {
      key: "5",
      name: "AiTing",
      gender: "female",
      age: "22",
      address: "Xi’An"
    }
  ];

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

  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 (
      <ReactDragListView.DragColumn {...this.dragProps} {...this.dragRowProps}>
        <Table
          bordered          
          components={this.components}
          columns={columns}
          dataSource={this.data}
        />
      </ReactDragListView.DragColumn>
    );
  }
}

export default ReactTabulator;

从“React”导入React；
从“antd”导入{Table}；
从“react Resizeable”导入{Resizeable}；
从“可重新调整大小”导入{resizeable as Resizer}；
从“react drag listview”导入ReactDragListView；
导入“antd/dist/antd.css”；
导入“/reactAbulatorStyles.css”；
常量可调整大小=（道具）=>{
const{onResize，width，…restProps}=props；
如果（！宽度）{
返回；
}
返回(
}
onResize={onResize}
DragableOpts={{enableUserSelectHack:false}
>
);
};
常量样式={
显示：“flex”，
对齐项目：“中心”，
辩护内容：“中心”，
边框：“实心1px#ddd”，
背景：“f0”
};
const resizeblerRow=（道具）=>{
const{onResize，width，height，…restProps}=props；
//如果（！高度）{
//返回；
// }
返回(
);
}
类ReactTabletor扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
栏目：[
{
标题：关键，
数据索引：“键”，
呈现：（文本）=>{text}，
宽度：50
},
{
标题：姓名，
数据索引：“名称”，
宽度：200
},
{
标题：性别，
数据索引：“性别”，
宽度：100
},
{
标题：年龄，
数据索引：“年龄”，
宽度：100
},
{
标题：地址，
数据索引：“地址”，
宽度：200
}
]
};
常数=this；
此参数为0.dragProps={
onDragEnd（从索引到索引）{
const columns=[…that.state.columns]；
常量项=列。拼接（从索引，1）[0]；
柱.拼接（toIndex，0，项目）；
那是一个州({
柱
});
},
节点选择器：“th”，
无柄选举人：“德拉甘德勒先生”，
ignoreSelector：“反应可调整大小的句柄”
};
此.dragRowProps={
onDragEnd（从索引到索引）{
},
节点选择器：“tr”，
无柄选举人：“德拉甘德勒先生”，
ignoreSelector：“反应可调整大小的句柄”
}
}
数据=[
{
关键：“1”，
姓名：“博兰”，
性别：“男性”，
年龄:"12岁",，
地址：“纽约”
},
{
键：“2”，
姓名：“JayChou”，
性别：“男性”，
年龄:"38岁",，
地址：“台湾”
},
{
关键：“3”，
姓名:"李",，
性别：“女性”，
年龄:"22岁",，
地址：“北京”
},
{
关键：“4”，
姓名：“秋丹”，
性别：“男性”，
年龄:"31岁",，
地址：杭州
},
{
钥匙：“5”，
姓名：“艾婷”，
性别：“女性”，
年龄:"22岁",，
地址：“西安”
}
];
组件={
标题：{
单元格：可调整大小
},
正文：{
单元格：调整大小箭头
}
};
handleResize=（索引）=>（e，{size}）=>{
this.setState（（{columns}）=>{
const nextColumns=[…列]；
下一列[索引]={
…下一列[索引]，
宽度：size.width
};
返回{columns:nextColumns}；
});
};
render（）{
const columns=this.state.columns.map（（列，索引）=>({
…上校，
onHeaderCell：（列）=>({
宽度：column.width，
onResize:this.handleResize（索引）
})
}));
返回(
);
}
}
导出默认反应器；