Question

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

此Github issue中记录了同样的问题，包括此example（感谢Github的@denzelby），其中过滤会折叠子网格。

请注意小提琴的代码如何更新状态onCountClick（单击＆＃34; inc＆＃34;按钮），导致重新渲染：

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使用状态来确定该行是否已折叠，并强制showChildren转为false在getInitialState()和componentWillReceiveProps()。

中

两个可能的原因：

componentWillReceiveProps() - 并且有很多与“孩子”无关的道具，所以任何道具变化都会引入你描述的不必要的副作用！ / p>
建议：尝试删除showChildren中componentWillReceiveProps()的{{1}}设置
不太可能：如果Griddle每次更改过滤器都会创建全新的组件（我还没有检查过！），那么gridRowContainer.jsx会导致所有行崩溃。然后需要对父组件进行相当大的重写以保留showChildren。
我考虑过将getInitialState()存储在数据本身中，并将您的容器的处理函数showChildren传递给setShowChildren组件（就像你可能对redux做的那样），但那会很混乱。

Answer 2

我知道这已经有一年了，但如果有人还在寻找答案，我就是这样做的。

在griddle.jsx.js中，在创建GridTable时，将此道具添加到第836行的清单

resultsFromFilter：！this.isNullOrUndefined（this.state.filteredResults）
在gridTable.jsx.js中，在第180行创建"resultsFromFilter": false时，将resultFromFilter添加到默认传递GridRowContainer道具。

resultsFromFilter：that.props.resultsFromFilter
在gridRowContainer.jsx.js中，将resultsFromFilter: false添加到默认道具列表中，并将此功能添加到组件中。
```
componentDidMount(){this.setState({showChildren:this.props.resultsFromFilter})}.
```

这将确保当子网格匹配时，结果将显示为折叠。

Griddle Subgrids在渲染上折叠

2 个答案: