Question

我正在使用react-grid-layout（RGL）来实现这个用例，并考虑两个因素

保持应用的状态，包括GridItems的子组件
启用GridItems子组件之间的通信（事件，数据流，

等）

在React Dev工具上检查RGL树我可以看到有很多中间组件。

我想知道是否有人实现了类似的场景，并且如果有一种方法可以使用Redux存储并将其传递给RGL树到GridItems的子组件。

<ResponsiveReactGridLayout
<ReactGridLayout
<div
<GridItem
<DraggableCore
<Resizable
<div
<UserChildComponent

非常感谢，

FØ

Answer 1

回答我自己的redux-noob问题：

树中有许多不可见元素这一事实并不能阻止商店沿着元素传递。我们的自定义组件（即GridItem的子组件和组件树上的叶子）可以按常规使用redux的连接获取商店。

阵营-网格的布局

class Layout extends React.PureComponent {
render() {
return (
  <div>
    <ResponsiveReactGridLayout
      onBreakpointChange={this.onBreakpointChange}
      {...this.props}
    >
      {_.map(this.state.items, el => this.createElement(el))}
    </ResponsiveReactGridLayout>
  </div>


export default connect(state => state)(Layout);

自定义组件

class myCustomComponent extends Component {

export default connect(state => state) (myCustomComponent);

ReactDevTools中生成的组件树

<Connect(Layout)
 <ResponsiveReactGridLayout
  <ReactGridLayout
   <div
    <GridItem
     <DraggableCore
      <Resizable
       <div
        <Connect(UserChildComponent)

并且redux存储和发送是他们道具的一部分。

使用Redux和react-grid-layout

1 个答案: