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

我正在尝试在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组件，因此也许确实存在引用和/或道具传递的问题。

最佳答案

我不确定100％“固定”列的含义，但是如果您希望列的大小由软件设置而不由用户更改，则只需设置resizable = false。在列上设置locked = true具有“冻结”列的效果，因此在滚动时，特定的列会停留在那里，这可能不是您想要的。

关于javascript - react-data-grid setScrollLeft不是函数-固定列不起作用-自定义行渲染器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41939635/