7

グリドルはサブグリッドをサポートしています。状態を変更するフィールドの 1 つに (行の選択に使用される) カスタム コンポーネントがあります。この状態の変更により再レンダリングが発生し、サブグリッドが折りたたまれます。とはいえ、開けたままにしておきたい。

これと同じ問題が、この 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ソースを見ると、 stategridRowContainer.jsxを使用して行が折りたたまれているかどうかを判断し、そのandに強制します。showChildrenfalsegetInitialState()componentWillReceiveProps()

2 つの原因が考えられます。

  1. componentWillReceiveProps()小道具が変更されるたびに呼び出されます-「子を表示する」とは関係のない小道具がたくさんあるため、小道具を変更すると、説明した不要な副作用が発生する可能性があります!

    提案:の設定showChildrenを削除してみてくださいcomponentWillReceiveProps()gridRowContainer.jsx

  2. 可能性は低い: フィルターを変更するたびに Griddle がまったく新しいコンポーネントを作成している場合 (私は確認していません!)、getInitialState()すべての行が折りたたまれます。showChildren を維持するには、親コンポーネントを大幅に書き直す必要があります。

  3. showChildrenデータ自体に格納し、コンテナーのハンドラー関数setShowChildrenをgridRowContainer.jsxコンポーネントに渡すことを考えました (redux で行うように) が、面倒です。

于 2016-05-15T01:54:21.107 に答える