要在不同页面上应用的Javascript

我需要在react页面的大部分时间应用javascript代码。基本上是从助手文件导出，然后在所有需要的页面上导入。下面的代码在一个页面上运行良好

tableRadius() {
    var tableHeader = document.getElementsByTagName('thead')[0].offsetHeight;
    var topValue = this.offsetTop - this.scrollTop;
    var top = Math.round(topValue + tableHeader);

    var verticalScroll = document.querySelector(".radius-wrapper");
    verticalScroll.setAttribute("style", "top:" + top + "px");
    return;
}

componentDidMount() {
    const table = document.getElementById("dispatchTable");
    table.addEventListener("scroll", this.tableRadius);
}

之后，我尝试将此代码添加到帮助文件中，以便在不同页面上使用它。我不知道我是否做对了，但是，我尝试在助手文件中添加tablueRadius函数，但出现了问题。 我就是这样做的

page.js

import { tableRadius } from '../../../services';

class Dispatcher extends Component {
  constructor(props) {
    super(props);
    this.tableRadius = tableRadius();
  }

  componentDidMount() {
    const table = document.getElementById("dispatchTable");
    table.addEventListener("scroll", this.tableRadius);
  }

}

助手文件，服务

export function tableRadius() {
  var tableHeader = document.getElementsByTagName('thead')[0].offsetHeight;
  var topValue = this.offsetTop - this.scrollTop;
  var top = Math.round(topValue + tableHeader);

  var verticalScroll = document.querySelector(".radius-wrapper");
  verticalScroll.setAttribute("style", "top:" + top + "px");

  return;  
}

在这里，我在助手文件上得到一个错误，上面写着，

TypeError:cannotreadproperty'offsetHeight'of undefined

我做得对吗？还是有更好的方法？你能推荐一下吗

---

多谢各位

您正在构造函数中调用

tableRadius

。你只需要分配它

class Dispatcher extends Component {
  constructor(props) {
    super(props);
    this.tableRadius = tableRadius;
  }

---

另外，除了

React

，我们更愿意不使用

DOM

api直接操作元素。相反，利用

React

生态系统。在

JSX

中编写您的元素，并在那里添加所需的侦听器。

谢谢兄弟，我是个新手，对此一无所知。你的解决方案解决了我的问题。顺便说一句，你能告诉我在哪里我可以学到最好的生态系统？我不认为这会很容易？我会推荐官方文件。