react-data-grid setScrollLeft不是函數 - 固定列不起作用 - 自定義行渲染器

Question

我正在嘗試在react-data-grid中實現固定列。 我通過添加locked: true跟隨這個例子 ，但它不起作用，所以我也嘗試使用自定義的渲染行，就像另一個例子一樣 。

我得到_this.refs[i].setScrollLeft is not a function錯誤。 嘗試對同一個問題進行hacky評論對我來說也不起作用（抱歉沒有代表評論！）。

我也嘗試創建一個自定義的單元格渲染類 ，但仍然沒有運氣。 我也嘗試使用refs回調方式：

class CellRenderer extends React.Component {    
  render() {
    return <ReactDataGrid.Cell {...this.props}/>
  }
};

class RowRenderer extends React.Component {
  static propTypes = {
    idx: React.PropTypes.string.isRequired
  };

  setScrollLeft = (scrollBy) => {
    // if you want freeze columns to work, you need to make sure you implement this as apass through
    this.row.setScrollLeft(scrollBy);
  };

  getRowStyle = () => {
    return {
      color: this.getRowBackground()
    };
  };

  getRowBackground = () => {
    return this.props.idx % 2 ?  'green' : 'blue';
  };

  render() {return (<div style={this.getRowStyle()}>
      <ReactDataGrid.Row 
        {...this.props}
        ref={r => { this.row = r; }}
        cellRenderer={CellRenderer}
      />
    </div>);
  }
};

任何幫助深表感謝！

編輯：嘗試很多東西，仍然沒有運氣，但我已經發現setScrollLeft方法永遠不會傳遞給Row組件，所以也許它確實是refs和/或props傳遞的問題。

Answer 1

我不是100％確定“固定”列的含義，但是如果您希望列的大小由軟件設置而不是由用戶更改，則可以簡單地設置resizable = false。 在列上設置locked = true會產生“凍結”列的效果，這樣當您滾動時，特定列會保留在那里，這可能不是您想要的。