Javascript 反应网格布局自定义调整大小控制柄不起作用

据

resizeHandle？：ReactElement

注意：如果我删除
resizeHandle={}
网格项将获得默认的resizehandler，它工作正常

CustomResizeHandle.js

import React from "react";

const SouthEastArrow = () => (
  <svg
    width="20px"
    height="20px"
    version="1.1"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z" />
  </svg>
);

const CustomHandle = (props) => (
  <div
    style={{
      background: "#fff",
      borderRadius: "2px",
      border: "1px solid #ddd",
      position: "absolute",
      bottom: 0,
      right: 0,
      padding: 0,
      cursor: "se-resize"
    }}
    {...props}
  />
);

const BottomRightHandle = () => (
  <CustomHandle>
    <SouthEastArrow />
  </CustomHandle>
);

export default BottomRightHandle;

从“React”导入React；
常量箭头=（）=>(
);
const CustomHandle=（道具）=>(
);
常量BottomRightHandle=（）=>(
);
导出默认的BottomRightHandle；

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";

import { Responsive, WidthProvider } from "react-grid-layout";

import "../../node_modules/react-grid-layout/css/styles.css";
import "../../node_modules/react-resizable/css/styles.css";

import BottomRightHandle from "./CustomResizeHandle";

const ResponsiveGridLayout = WidthProvider(Responsive);

const Layout = (props) => {
  const [items, setItems] = React.useState([
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
    { i: "b", x: 2, y: 0, w: 2, h: 1 }
  ]);

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: items }}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      resizeHandles={["se"]}
      resizeHandle={<BottomRightHandle />}
    >
      {items.map((item) => {
        return (
          <div
            key={item.i}
            style={{ backgroundColor: "#ccc" }}
            data-grid={{ x: item.x, y: item.y }}
          >
            {item.i}
          </div>
        );
      })}
    </ResponsiveGridLayout>
  );
};

class App extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Col>
            <Layout />
          </Col>
        </Row>
      </Grid>
    );
  }
}

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

从“React”导入React；
从“react dom”导入react dom；
从“react flexbox Grid”导入{Grid，Row，Col}；
从“react grid layout”导入{Responsive，WidthProvider}；
导入“../../node_modules/react grid layout/css/styles.css”；
导入“../../node_modules/react resizeble/css/styles.css”；
从“/CustomResizeHandle”导入BottomRightHandle；
const ResponsiveGridLayout=WidthProvider（响应型）；
常量布局=（道具）=>{
const[items，setItems]=React.useState([
{i:a'，x:0，y:0，w:2，h:1}，
{i:b'，x:2，y:0，w:2，h:1}
]);
返回(
{items.map（（item）=>{
返回(
{item.i}
);
})}
);
};
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
render（，document.getElementById（“容器”）；
好吧，尽管文档中已经描述了这一功能，但在
react grid layout
中似乎还没有实现这一功能！！这会引起很多混乱。无论如何，我找到了一个变通方法，可以应用自定义图标来调整大小。首先，我们需要在所需位置创建具有绝对位置的定制组件（正如您通过创建
BottomRightHandle
组件所做的那样）。然后，将
BottomRightHandle
传递到
ResponsiveGridLayout
组件中，如下所示：

 <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: items }}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      resizeHandles={["se"]}
      // resizeHandle={<BottomRightHandle />}
    >
      {items.map((item) => {
        return (
          <div
            key={item.i}
            style={{ backgroundColor: "#ccc" }}
            data-grid={{ x: item.x, y: item.y }}
          >
            {item.i}
            <BottomRightHandle />
          </div>
        );
      })}
    </ResponsiveGridLayout>

请检查一下电话号码

请记住，
resizeHandles
位置（在本例中为
se
）应与
BottomRightHandle
组件的绝对位置相同。
请让我知道它是否适用于您
.react-grid-item > .react-resizable-handle::after {
  border-right: 2px solid rgba(0, 0, 0, 0);
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}

.react-resizable-handle {
  background: transparent;
}