react-grid-layout如何调整网格上组件的大小?

时间:2018-08-14 16:06:16

标签: reactjs react-grid-layout

我尝试使用带有react-grid-layout的自定义组件。但是,我无法使其正常运行。 将组件放在div中时,可以调整div的大小,但是组件本身不会随之调整大小。 当我直接将组件放置在grid标签中时,根本无法调整大小或移动它,并且网格的边框也与组件的边框都不匹配。

这是我的index.js的代码:

function App() {
return (
<div className="App" style={{ background: "grey" }}>
  <GridLayout className="layout" cols={16} rowHeight={10} width={500}>
    <div key="a" data-grid={{ x: 0, y: 0, w: 5, h: 10 }}>
      <TestComponent
        style={{
          color: "green",
          height: "auto",
          width: "auto",
          background: "red"
        }}
      />
    </div>

    <div
      key="b"
      data-grid={{ x: 5, y: 0, w: 3, h: 3 }}
      style={{ background: "green" }}
    >
      this works fine
    </div>

    <TestComponent
      key="c"
      data-grid={{ x: 1, y: 0, w: 2, h: 2 }}
      style={{
        color: "blue",
        height: "auto",
        width: "auto",
        background: "black"
      }}
    />
  </GridLayout>
</div>
);
}

我已将完整示例(包括TestComponent)上传到代码沙箱中: https://codesandbox.io/s/7zl7mm90m0

如何在网格上正确实现自定义组件?

最诚挚的问候,

W。

1 个答案:

答案 0 :(得分:2)

根据我在react-grid-layout方面的专业知识,您必须使用div设置data-grid属性,并且在该div内可以传递自定义组件。否则,它将无法正常工作。 这将起作用:

eval "python ./script "$LINE

否则,您可以为n组件创建一个函数,然后将该函数传递给网格,例如:

<div key="a" data-grid={{ x: 0, y: 0, w: 5, h: 10 }}>
  <TestComponent
    style={{
      color: "green",
      height: "auto",
      width: "auto",
      background: "red"
    }}
  />
</div>