enterzhu enterzhu - 1 year ago 121
React JSX Question

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

I have a universal React + Redux app which render the first screen page on server side, then the browser side ReactJS will finish the rest of tasks.

Currently I met an issue, I can't access the refs using


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.

handleScroll(event) {
if (this.xxx !== null) {

I need get the ReactDom element while user is scrolling the page and do some thing on that element. But if I can only access refs in componentDidMount(), how can I make this happen?


Answer Source

Try debugging, put a breakpoint in handleScroll to check what all you get in 'this'. Can you see any other refs, or state?

You can try binding 'this' to handleScroll, if that helps, like:

window.addEventListener('scroll', this.handleScroll.bind(this));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download