reactjs - react-grid-layout - 失败的道具类型：布局属性必须是一个对象。收到：[对象数组]

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-layout1.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断点。