2

在 React 中，我正在尝试使用https://github.com/STRML/react-grid-layout创建一个基本网格。

我创建了两个矩形，并为它们提供了这样的布局：

<ReactGridLayout layout={{x:1, y:1, w:5, h:10}}>
  <div key={1} style={{width: "500px", height: "100px", border: "1px solid #000", bgcolor: "blue", color: "green"}}>
    Rectangle 1
  </div>

  <div key={2} style={{width: "500px", height: "100px", border: "1px solid #000", bgcolor: "blue", color: "green"}}>
    Rectangle 2
  </div>
</ReactGridLayout>

但是，显示的不是矩形，而是：

在此处输入图像描述

关于可能导致此失败的任何想法？

4

1 回答 1

1

您的布局与自述文件所说的不匹配。它应该是一组布局对象，每个内容条目一个对象。您提供了一个对象，没有任何数组环绕它。

你可能想要这样的东西：

var React = require('react');

var hash = require('hashfunctionofsomesort');

var MyGrid = React.createClass({
  getDefaultProps: function() {
    divcontent: [
      "rectangle 1",
      "rectangle 2"
    ],
    defaultLayout: {
      x: ..., y: ..., w: ..., h: ...
    }
  },
  generateDivs: function() {
    return this.props.divcontent.map(function(content) {
      return <div key={hash(content)}>{content}</div>;
    });
  },
  generateLayouts: function() {
    var defaultLayout = this.props.defaultLayout;
    var divs = this.props.divcontent;
    return divs.map(function(div, index) {
      var layout = defaultLayout;
      // basically generate a layout here. Whatever values work for you.
      layout.y = index;
      return layout;
    });
  },
  render: function() {
    var layouts = this.generateLayouts();
    var divs = this.generateDivs();
    return <ReactGridLayout layout={layouts}>{divs}</ReactGridLayout>;
  }
});

所以：每个 div 一个布局，并且正确地做键：键应该表示您正在键入的组件，如果您的键是基于您指定元素的顺序，那么您做错了键。键的要点是允许快速差异，使用排序就像它们是键意味着如果你重新排序你的键，而不是 React 去“这些元素刚刚被交换”，它会看到两个元素的完整属性和内容更新，制作东西慢很多。

于 2016-02-03T17:12:58.880 回答