Почему свойство current моего ref равно null?

Question

[Tweedledum]

Привет, проблема в следующем:

есть компонент А:

function А(...) {
  const anchorRef = React.createRef<HTMLDivElement>();

  return (
    <div
      className="Blabla"
      ref={anchorRef}
    >
    ...
    <B anchorRef={anchorRef} />
    ...

и есть компонет B, где я пытаюсь использовать этот anchorRef:

class B extends React.Component {
  ...
  public render() {
    ...
    console.log('-->', this.props.anchorRef);
    return (
      ...
      <Abc someprop = {this.props.anchorRef}
  ...

сам элемент виден в B, но его свойство current всегда null, в дебагере тоже null, но если по нему кликнуть значение появляется с пометкой 'Value was evaluated just now'

Answer 1

[Антон Спирин]

Во время вызова render, элементы еще не созданы и не добавлены в DOM, соответственно ref равен null. Вы можете получить ref после монтирования:

class B extends React.Component {
  componentDidMount() {
    console.log(this.props.anchorRef);
  }
}

В вашем случае правильней использовать useRef, так как в отличии от вызова createRef, он при перерисовках возвращает один и тот же объект. Вызов createRef, в свою очередь, каждый раз возвращает новый.

function A {
  const anchorRef = useRef<HTMLDivElement>(null);
  // ...
}

Comments

[Никита Геннадич]

Не всегда это работает почему-то тоже...

import React from "react"
import { CountUp } from 'countup.js';

class Counter extends React.Component {
	constructor(props) {
		super(props);
		this.counterRef = React.createRef();
	}

	componentDidMount() {
		this.initCounter();
	}

	initCounter = () => {
		if (this.counterRef.current) {
			console.log(this.counterRef);
			const countUp = new CountUp(this.counterRef.curent, 5234);
			if (!countUp.error) {
				countUp.start();
			} else {
				console.error(countUp.error);
			}
		}
	}

	render() {
		return (
			<div ref={this.counterRef}/>
		);
	}
}

export default Counter;

Инициализация счётчика не проходит с ошибкой что ему подсунули Null или Undef...

Даже если в реф колбэк передавать, тот же эффект, почему-то...