javascript - 检查元素是否有滚动-reactjs

Question

我有<table>包含在<div>中。每当我们有更多数据时 <div>在这种情况下会有垂直滚动，我想使表格宽度为 100% ，如果不存在垂直滚动，我想使表格宽度为 98% 。

render() {
  return (
    <div onScroll={this.handleScroll} className="scroll-property">
      <table className="react-listing-table table" width={this.setWidth()+'%'}>
      ...
  );
}

setWidth(){
  let dom = ReactDOM.findDOMNode(this).parentNode;
  let hasVerticalScrollbar = dom.scrollHeight > dom.clientHeight;

  if (hasVerticalScrollbar) {
    return 100;
  } else {
    return 98;
  }
}

问题是我无法找到父 domNode，即从表中查找 div 并获取运行时错误

typeError: Cannot read property 'parentNode' of null

请指导我

Answer 1

当在 render 函数中调用 setWidth 时，DOM 实际上还不存在。这是您想要在 componentDidMount 中执行的操作，也可能在 componentDidUpdate 中执行，使用表的引用。

tableRef = null

render() {
  return (
    <div onScroll={this.handleScroll} className="scroll-property">
      <table className="react-listing-table table" ref={el => this.tableRef = el}>
      ...
  );
}

componentDidMount() {
  this.tableRef.width = this.setWidth() + '%'
}

componentDidUpdate() {
  this.tableRef.width = this.setWidth() + '%'
}