Gridder子网格在渲染上折叠

 

扒炉支持子网格。 我有一个自定义组件（用于行选择）在其中一个更改状态的字段中。 此状态更改会导致重新呈现，这会折叠子网格。 不过，我希望它保持开放。

在这个Github问题中记录了同样的问题，包括这个例子（感谢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中我还没有发现。

查看gridRowContainer.jsx的github源代码， gridRowContainer.jsx使用state来确定该行是否被折叠，并且在其getInitialState()和componentWillReceiveProps()强制showChildren为false 。

两个可能的原因：

  • 每当道具改变时都会调用componentWillReceiveProps() ，并且有很多道具与'显示儿童'无关，所以任何道具改变都会引入你描述的不需要的副作用！

    建议：尝试删除showChildren的componentWillReceiveProps()中gridRowContainer.jsx

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

  • 我想在数据本身中存储showChildren ，并将你的容器的处理函数setShowChildren传递给gridRowContainer.jsx组件（就像你可能使用的是redux一样），但这会变得混乱。

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

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

    resultsFromFilter：！this.isNullOrUndefined（this.state.filteredResults）

  • 在gridTable.jsx.js ，在第180行创建GridRowContainer时，将"resultsFromFilter": false添加到默认传递resultFromFilter prop。

    resultsFromFilter：that.props.resultsFromFilter

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

    • 这将确保当子网格匹配时结果出现为折叠状态。

    链接地址: http://www.djcxy.com/p/33943.html

    上一篇: Griddle Subgrids Collapse on Render

    下一篇: internet explorer