React网格未呈现

Question

在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>

然而，显示的是：

，而不是矩形

关于什么可能导致这种失败的任何想法？

Answer 1

您的布局与README says的布局不匹配。它应该是一个布局对象数组，每个内容条目一个对象。您提供了一个单独的对象，没有任何数组环绕它。

你可能想要这样的东西：

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有一个布局，并且右键是正确的：键应该表示你键入的组件，如果你的键是基于你指定元素的顺序，你就是这样。做错了。关键点是允许快速差异，使用排序，好像他们的关键意味着如果你重新排序你的密钥，而不是反应进入＆＃34;这些元素刚刚被交换＆＃34;它会看到两个元素的完整属性和内容更新，使事情变得更慢。