1

根据React-Grid-Layout 文档

resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)

可用于实现网格项目的自定义调整大小句柄。

就我而言，这不起作用。它甚至没有抛出任何错误。

代码： https ://codesandbox.io/s/react-playground-forked-jwfn3?file=/index.js

注意：如果我删除resizeHandle={<BottomRightHandle />}网格项目将获得默认的调整大小处理程序，它工作正常。

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;

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"));
4

1 回答 1

0

好吧，尽管文档中已对此功能进行了描述，但似乎尚未实现此功能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>

然后，创建一个 css 文件以通过这些样式删除和消失默认的调整大小箭头：

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

请在此处检查沙箱

请记住，resizeHandles位置（在这种情况下se）应该与BottomRightHandle组件的绝对位置相同。

于 2021-05-15T11:08:22.883 回答