javascript - Griddle 子网格在渲染时折叠

Question

Griddle支持subgrids .我在更改状态的字段之一中有一个自定义组件(用于行选择)。此状态更改会导致重新渲染，从而折叠子网格。但是，我希望它保持打开状态。

这个 Github 中记录了同样的问题 issue ，包括这个 example (感谢 Github 的 @denzelby)，其中过滤折叠了子网格。

请注意 fiddle 中的代码，状态如何更新 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

查看github source of Griddle , gridRowContainer.jsx 使用state 判断行是否折叠，并强制showChildren 为false它的 getInitialState() 和 componentWillReceiveProps()。

两个可能的原因:

1. componentWillReceiveProps() 每当 props 发生变化时都会被调用 - 并且有很多 props 与“显示 child ”无关，因此任何 prop 变化都可能引入您描述的不良副作用!

   建议:尝试去掉gridRowContainer.jsx的componentWillReceiveProps()中showChildren的设置

2. 不太可能:如果 Griddle 每次更改过滤器都会创建全新的组件(我还没有检查过!)，那么 getInitialState() 会导致所有行折叠。然后需要对父组件进行大量重写以保留 showChildren。

3. 我考虑过将 showChildren 存储在数据本身中，并将您容器的 处理程序函数 setShowChildren 传递给 gridRowContainer.jsx 组件(就像您可能对 redux 所做的那样)，但这会变得困惑。