React grid not rendered

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>; 
    } 
}); 

所以：每格一個佈局，並做正確的鑰匙：鑰匙應該是表示你的密鑰組件的，是如果你的關鍵是基於在你指定元素的順序上，你的鍵是錯誤的。關鍵點在於允許快速區分，使用排序就好像它們是鍵一樣，意味着如果您重新排序鍵，而不是React「這些元素只是交換了」，它會看到這兩個元素的完整屬性和內容更新，使得事物慢很多。