在 class 组件方法中使用 refs

Question

How do I access refs within different methods of one component? As the example below, I am trying to access a node through a reference within a method, not the render() function, which results Uncaught TypeError: Cannot read property 'current' of undefined at handleScroll . Ideas?

Constructor:

constructor(props) {
  super(props);
  this.parallaxHeaderRef = createRef();

this.renderWelcomeMessage = this.renderWelcomeMessage.bind(this);
this.renderMenu = this.renderMenu.bind(this);
this.renderHeroBackground = this.renderHeroBackground.bind(this);
}

Binding method to didMount():

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

Accessing ref within another method:

handleScroll() {
  const currentScrollPos = window.pageYOffset;
  const node = this.parallaxHeaderRef.current;

  if (window.innerWidth > 700) {
    node.style.transform = `translateY(${currentScrollPos / 16}px)`;
  }
}

renderWelcomeMessage() {
  <h2 ref={this.parallaxHeaderRef}></h2>
}

Render:

render() {
    return (
      <div className="hero" id="hero">
        { this.renderWelcomeMessage() }
        { this.renderMenu() }
        { this.renderHeroBackground() }
      </div>
    );
  }
}

Answer 1

How do I access refs within different methods of one component? As the example below, I am trying to access a node through a reference within a method, not the render() function, which results Uncaught TypeError: Cannot read property 'current' of undefined at handleScroll . Ideas?

Constructor:

constructor(props) {
  super(props);
  this.parallaxHeaderRef = createRef();

this.renderWelcomeMessage = this.renderWelcomeMessage.bind(this);
this.renderMenu = this.renderMenu.bind(this);
this.renderHeroBackground = this.renderHeroBackground.bind(this);
}

Binding method to didMount():

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

Accessing ref within another method:

handleScroll() {
  const currentScrollPos = window.pageYOffset;
  const node = this.parallaxHeaderRef.current;

  if (window.innerWidth > 700) {
    node.style.transform = `translateY(${currentScrollPos / 16}px)`;
  }
}

renderWelcomeMessage() {
  <h2 ref={this.parallaxHeaderRef}></h2>
}

Render:

render() {
    return (
      <div className="hero" id="hero">
        { this.renderWelcomeMessage() }
        { this.renderMenu() }
        { this.renderHeroBackground() }
      </div>
    );
  }
}