通用 React 应用程序完成服务器端首屏渲染后如何访问 refs？

Question

我有一个通用的 React + Redux 应用程序，它在服务器端呈现第一个屏幕页面，然后浏览器端 ReactJS 将完成其余任务。

目前我遇到了一个问题，我无法使用 1. this.refs[xxx] 2.ref={(ref) => this.xxx = ref}

componentDidMount() {
    // The code in handleScroll cannot get this.xxx, as it would print the error 
    // Uncaught TypeError: Cannot read property 'xxx' of null
    window.addEventListener('scroll', this.handleScroll);
    // Code below can get the rect numbers.
    console.log(this.xxx.getBoundingClientRect());
}

handleScroll(event) {
   if (this.xxx !== null) {
     console.log(this.xxx.getBoundingClientRect());
   }
 }

我需要在用户滚动页面时获取 ReactDom 元素并对该元素执行一些操作。但是，如果我只能访问 componentDidMount() 中的引用，我该如何实现？

谢谢。

Answer 1

尝试调试，在 handleScroll 中放置一个断点来检查你在 'this' 中得到了什么。你能看到任何其他参考或状态吗？

如果有帮助，您可以尝试将 'this' 绑定到 handleScroll，例如：

window.addEventListener('scroll', this.handleScroll.bind(this));

通用 React 应用程序完成服务器端首屏渲染后如何访问 refs？

How to access the refs after the universal React app finished server side first screen rendering?

universal

refs

reactjs