react-grid-layout - 道具类型失败：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-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是断点