Griddle Subgrids在渲染上折叠

Question

干锅支持子网格.我在一个改变状态的字段中有一个自定义组件(用于行选择).此状态更改会导致重新呈现,从而折叠子网格.但是,我希望它保持开放.

此相同的问题是记录在这个Github的问题,其中包括本实施例(感谢@denzelby Github上的),在该过滤折叠该子网格.

请注意来自小提琴的代码如何更新状态onCountClick(单击"inc"按钮),导致重新渲染:

var GridAndCounter = React.createClass({

  render: function() {
  var columnNames = ['id', 'age', 'name', 'company', 'state', 'country', 'favoriteNumber'];
  var rowMetadata = {key: "id"};
    return <div><Counter count={this.state.count} onClick={this.onCountClick} /><Griddle results={fakeData} rowMetadata={rowMetadata} columnNames={columnNames} resultsPerPage={100} showFilter={true} /></div>
  },
  onCountClick: function() {
      React.addons.Perf.start();
      this.setState({count: this.state.count + 1 });
      setTimeout(function() {
          React.addons.Perf.stop();
          React.addons.Perf.printDOM();
      }, 500);
  },
  getInitialState: function() { 
      return { count: 0 }; 
  }
})

此状态更新会导致重新呈现,将所有内容设置为折叠.如何在重新渲染时保持所有内容？我也许可以跟踪哪些是自己扩展的,但后来我需要一种编程方式来扩展行,这是我没有用Griddle发现的.

Answer 1

查看Griddle 的 github 源代码，gridRowContainer.jsx使用状态来确定行是否折叠，并强制showChildren在false其getInitialState()和中componentWillReceiveProps()。

两个可能的原因：

1. componentWillReceiveProps()每当道具更改时都会调用 - 并且有很多与“显示孩子”无关的道具，因此任何道具更改都可能会引入您所描述的不需要的副作用！

   建议：showChildren尝试删除in componentWillReceiveProps()of的设置gridRowContainer.jsx

2. 不太可能：如果 Griddle 在每次更改过滤器时创建全新的组件（我没有检查！），那么getInitialState()将导致所有行崩溃。然后需要对父组件进行大量重写才能保留 showChildren。

3. 我考虑过存储showChildren在数据本身中，并将容器的处理函数传递setShowChildren给gridRowContainer.jsx组件（就像使用 redux 所做的那样），但这会变得混乱。