7

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

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

请注意小提琴中的代码如何更新状态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 中没有发现的。

4

2 回答 2

3

查看 Griddle 的 github源，gridRowContainer.jsx使用state来确定该行是否折叠，并强制showChildren在false其getInitialState()andcomponentWillReceiveProps()中。

两个可能的原因：

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

    建议：尝试去掉showChildrenin componentWillReceiveProps()of的设置gridRowContainer.jsx

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

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

于 2016-05-15T01:54:21.107 回答
0

我知道这已经一岁了，但如果有人仍在寻找答案，这就是我实现它的方式。

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

    resultsFromFilter: !this.isNullOrUndefined(this.state.filteredResults)

  2. 在中，在第 180 行 创建时gridTable.jsx.js添加"resultsFromFilter": false到默认传递属性。resultFromFilterGridRowContainer

    resultsFromFilter: that.props.resultsFromFilter

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

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

于 2016-09-23T21:20:07.330 回答