Tweedledum
@Tweedledum

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

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

есть компонент А:
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'
  • Вопрос задан
  • 1065 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Во время вызова 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);
  // ...
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы