当我将它与 onlayoutChange 方法集成时,我发现处理 react-grid-layout (来自https://github.com/STRML/react-grid-layout )的复杂性很少。
每当我添加一个新项目时,我都会将布局和项目添加到现有状态,并为布局定制 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')
)
有人可以帮助我让我知道我在这里缺少什么吗?提前致谢。