reactjs - react-grid-layout - 失败的 Prop 类型 : Layout property must be an object. 已收到:[对象数组]

Question

我已按照react-grid-layout中的指南进行操作，但仍然收到此错误消息。

这是我的布局对象:

import React from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import NewvsReturnVisitors from "./newvsreturnvisitors";
import ReactDOM from "react-dom";
import "./styles/styles.css";

const e = React.createElement;
const ResponsiveGridLayout = WidthProvider(Responsive);

function App() {

  const layout = [
    { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
    { i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
  ];

  return (
    <ResponsiveGridLayout
      layouts={layout}
    >
      <div key="1">
        <NewvsReturnVisitors />
      </div>
    </ResponsiveGridLayout>
  );
}

ReactDOM.render(e(App), document.getElementById("root"));

我的 Codesanbox 在这里:

只要打开控制台，就会出现错误消息。将不胜感激任何帮助!

Answer 1

您正在使用 react-grid-layout 版本 1.2.0，其类型结构有一些变化

这是新的更新类型:

interface Layouts {
  [P: string]: Layout[];
}

为了满足这一点，您需要将布局对象更改为:

const layout = [
  { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
  { i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
];

收件人:

const layout = {
  xs: [{ i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 }],
  md: [{ i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }]
};

对于xs，md是断点。