Griddle Subgrids Collapse on Render

Question

Griddle поддерживает subgrids. У меня есть пользовательский компонент (используемый для выбора строки) в одном из полей, которое изменяет состояние. Это изменение состояния вызывает повторную визуализацию, которая разрушает подкризис. Тем не менее, я бы хотел, чтобы он оставался открытым.

Эта же проблема зафиксирована в этом Github issue, включая этот example (спасибо @denzelby от Github), в котором фильтрация сворачивает субгриды.

Примечание в коде из скрипки, как состояние обновляется onCountClick (нажатие на кнопку «вклы»), в результате чего повторно вынести:

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().

Две возможные причины:

1. componentWillReceiveProps() вызывается всякий раз, когда изменить реквизит - и есть много реквизита, не связанных с «показывая детям», поэтому любая проп изменение может ввести нежелательный побочный эффект, вы можете описать!

   Предложение: Попробуйте удалить настройки showChildren в componentWillReceiveProps() из gridRowContainer.jsx

2. Реже: Если Мясной создают совершенно новые компоненты, при каждой смене фильтра (я не проверял!), То getInitialState() приведет к сбою всех строк. Тогда для существенного перезаписи родительских компонентов потребуется сохранить showChildren.

3. Я думал о хранении showChildren в самих данных, и передавая функцию setShowChildren обработчика вашего контейнера через к gridRowContainer.jsx компонента (как вы могли бы сделать с Redux), но это было бы запутаться.

Answer 2

Я знаю, что это год, но если кто-то все еще ищет ответ, так я его реализовал.

1. В griddle.jsx.js, при создании GridTable, добавьте эту опору в , что список на линии 836

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

2. В gridTable.jsx.js, add "resultsFromFilter": false по умолчанию pass down resultFromFilter prop при создании GridRowContainer on line 180.

   resultsFromFilter: that.props.resultsFromFilter

3. В gridRowContainer.jsx.js, добавьте resultsFromFilter: false в список по умолчанию реквизита и добавить эту функцию к компоненту.

   componentDidMount(){this.setState({showChildren:this.props.resultsFromFilter})}. 
   

Это гарантирует, что когда-либо к югу сетки соответствует результат выходит как разрушилась.