reactjs - 将 Redux 与 react-grid-layout 一起使用

Question

我正在使用 react-grid-layout (RGL) 来实现这个用例，有两个考虑

• 保持应用程序的状态，包括 GridItems 的子组件

• 启用 GridItems 的子组件（事件、数据流、

ETC）

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

我想知道是否有人实现了类似的场景，以及是否有办法使用 Redux 存储并将其沿 RGL 树传递给 GridItems 的子组件。

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

非常感谢，

FØ

Answer 1

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

树中有许多不可见元素的事实并不能阻止将商店向下传递元素。我们自定义的组件（即 GridItem 的子组件和组件树上的叶子）可以像往常一样使用 redux 的 connect 来获取 store。

反应网格布局

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 store 和 dispatch 是他们 props 的一部分。