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

Question

我正在尝试在我的 react-data-grid 中实现固定列。 我关注example通过添加 locked: true 但它不起作用，所以我还尝试使用呈现的自定义行，例如 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 组件，所以也许它是确实是引用和/或传递的 Prop 有问题。

Answer 1

我不是 100% 确定“固定”列的含义，但如果您希望列的大小由软件设置而不是由用户更改，则可以简单地设置 ressized = false。在列上设置locked = true具有“卡住”列的效果，这样当您滚动时，该特定列保留在那里，这可能不是您想要的。