2016-05-10 11 views
7

Griddle hỗ trợ subgrids. Tôi có một thành phần tùy chỉnh (được sử dụng để chọn hàng) trong một trong các trường thay đổi trạng thái. Sự thay đổi trạng thái này gây ra một tái render, làm sụp đổ subgrid. Tuy nhiên, tôi muốn nó vẫn mở.Vỉa quế vỉa hè Thu gọn trên Render

Vấn đề tương tự này được ghi lại trong Github issue này, bao gồm example (nhờ @denzelby của Github) trong đó lọc thu gọn các cây con.

Lưu ý trong mã từ fiddle cách trạng thái được cập nhật onCountClick (nhấn vào nút "inc"), gây ra tái render:

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 }; 
    } 
}) 

cập nhật tình trạng này gây ra lại làm mà thiết lập mọi thứ để sụp đổ. Làm thế nào tôi có thể giữ mọi thứ được mở rộng khi tái render? Tôi có lẽ có thể theo dõi cái nào được mở rộng bản thân mình, nhưng sau đó tôi sẽ cần một cách có lập trình để mở rộng các hàng, mà tôi đã không phát hiện với Griddle.

Trả lời

3

Nhìn vào github source of Griddle, gridRowContainer.jsx sử dụng bang để xác định xem hàng được sụp đổ hay không, và các lực lượng showChildren-false trong getInitialState()componentWillReceiveProps() của nó.

Hai nguyên nhân có thể:

  1. componentWillReceiveProps() được gọi bất cứ khi nào đạo cụ thay đổi - và có rất nhiều đạo cụ không liên quan đến 'cho thấy trẻ em, vì vậy bất kỳ sự thay đổi prop có thể giới thiệu các tác dụng phụ không mong muốn mà bạn mô tả!

    Góp ý: Hãy thử loại bỏ các thiết lập của showChildren trong componentWillReceiveProps() của gridRowContainer.jsx

  2. Ít có khả năng: Nếu griddle đang tạo ra các thành phần hoàn toàn mới với mỗi thay đổi của bộ lọc (tôi đã không kiểm tra!), Sau đó getInitialState() sẽ khiến tất cả các hàng bị thu gọn. Sau đó nó sẽ cần phải viết lại đáng kể các thành phần cha mẹ để bảo tồn showChildren.

  3. Tôi nghĩ về lưu trữ showChildren trong các dữ liệu riêng của mình, và đi qua chức năng handler của container của bạn setShowChildren thông qua các thành phần gridRowContainer.jsx (như bạn có thể làm với Redux), nhưng điều đó sẽ nhận được lộn xộn.

+0

Cảm ơn các đề xuất hữu ích. Tôi đã cố gắng # 1 nhưng không thành công. Có vẻ như nó tạo lại toàn bộ thành phần. Griddle 1.0 đang hoạt động, vì vậy có lẽ chúng ta sẽ thấy một cách tiếp cận tốt hơn hoặc bản địa hơn. –

0

Tôi biết đây là một năm cũ nhưng nếu một số người vẫn đang tìm kiếm câu trả lời, đây là cách tôi đã triển khai.

  1. Trong griddle.jsx.js, trong khi tạo ra GridTable, thêm prop này để liệt kê trên dòng 836

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

  2. Trong gridTable.jsx.js, thêm "resultsFromFilter": false để mặc định chuyển xuống resultFromFilter chống đỡ trong khi tạo GridRowContainer trên dòng 180.

    resultsFromFilter: that.props.resultsFromFilter

  3. Trong gridRowContainer.jsx.js, thêm resultsFromFilter: false vào danh sách các đạo cụ mặc định và thêm chức năng này vào thành phần.
    componentDidMount(){this.setState({showChildren:this.props.resultsFromFilter})}. 
    

Điều này sẽ đảm bảo rằng khi từng lưới phụ phù hợp với kết quả đi ra như sụp đổ.