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

Question

我正在尝试在我的react-data-grid 中实现固定列。 我通过添加locked: true 来关注example，但它不起作用，所以我也尝试使用呈现的自定义行，例如other example。

我收到_this.refs[i].setScrollLeft is not a function 错误。尝试在 this same question 上发表评论对我也不起作用（抱歉，没有足够的代表发表评论！）。

我也试过create a custom cell render class，但还是没有运气。 我也尝试改用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 具有“冻结”列的效果，因此当您滚动时，特定列会停留在那里，这可能不是您想要的。