0
反応格子レイアウト（https://github.com/STRML/react-grid-layout）をonlayoutChangeメソッドと統合すると、複雑さはほとんど感じません。handle反応格子レイアウトのレイアウト変更
私は新しいアイテムを追加するたびに、レイアウトのカスタマイズされたIDで既存の状態にレイアウトとアイテムを追加します。 （この場合は簡単に私はdate.now（）を使用していますが、私の要件に基づいてそれのためのいくつかのより複雑なロジックを持っています）
私は新しいアイテムを追加し、 ResponsiveReactGridLayoutの「onLayoutChange」です。このための入力を観察すると、レイアウトに設定されたカスタムidプロパティが表示されません。 （入力として取得しているもののスクリーンショットを追加しました）
私はonLayoutChangeを使ってストアを更新しています。私はこれをしない場合、私は新しいアイテムを追加すると、レイアウト全体がリセットされています。以下 
私はこの
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import _ from 'lodash';
// React component
class Counter extends Component {
onCustomLayoutChange(layout) {
debugger
}
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value.length}</span>
<span>{this.props.layout.length}</span>
<ResponsiveReactGridLayout className="layout" layouts={{lg: this.props.layout}} verticalCompact={false}
onLayoutChange={(e) => this.onCustomLayoutChange(e)}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
rowHeight={30}
>
{
_.map(value, (item,i) => (
<div style={{border:'1px solid red', margin:'10px'}} key={i} >
{item}
</div>
))
}
</ResponsiveReactGridLayout>
<button onClick={onIncreaseClick}>Add item</button>
<ul>
{
_.map(this.props.layout, (item,i) => (
<li key={i} >
{item.i}
</li>
))
}
</ul>
</div>
)
}
}
Counter.propTypes = {
value: PropTypes.array,
onIncreaseClick: PropTypes.func.isRequired
}
// Action
const increaseAction = { type: 'increase' }
const onLayoutChangeAction = { type: 'update_layout' }
// Reducer
function counter(state = { count: [], layout: [] }, action) {
let count = _.cloneDeep(state.count)
let layout =_.cloneDeep(state.layout)
switch (action.type) {
case 'increase':
let id = Date.now()
count.push('hello '+id)
layout.push({
i: `${id}`,
x: 0,
y: 0,
w: 1,
h: 1
})
return Object.assign({}, state, { count: count, layout: layout });
// return { count: count, layout: layout }
case 'update_layout':
return state
default:
return state
}
}
// Store
const store = createStore(counter)
// Map Redux state to component props
function mapStateToProps(state) {
return {
value: state.count,
layout: state.layout,
}
}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick:() => dispatch(increaseAction),
onLayoutChangeAction:() => dispatch(onLayoutChangeAction)
}
}
// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
のために使用していたコードは、誰かが私は私がここで行方不明です何を知らせるに私を助けることはできますか？ ありがとうございました。