React.createRef всегда null
Я, вероятно, делаю здесь что-то действительно глупое, но, хоть убей, я не могу понять, почему ref всегда равен нулю.
import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
constructor(props) {
super(props);
this.myRef = React.createRef();
console.info(this.myRef);
}
componentDidMount() {
console.info(this.myRef);
}
componentWillUnmount() {
console.info('unmounting');
}
render() {
console.info(this.myRef);
return (
<div ref = {this.myRef}>
foobar
</div>
);
}
}
Приставка:
{current: null}
{current: null}
{current: null}
Я использую React 16.3. Что мне не хватает?
Работает. codeandbox.io/s/40z5o73wz0
У меня тоже работает. Перейдите по этой ссылке, чтобы узнать больше о refs reactjs.org/docs/refs-and-the-dom.html
Должен быть какой-то побочный эффект от другого моего кода. Как вы отметили, он работает автономно. Но я использую этот код в одном из компонентов своего проекта, я вижу {current: null}. Так странно.
Проблема с @deruse this? Вы можете указать нам больше кодов для проверки.
Поделитесь своим кодом другого компонента из wr MyComponent, чтобы лучше понять
CAn вы попробуйте сделать консольный журнал this.myRef в рендере перед возвратом вместо componentDidMount и проверьте. Это должно печатать текущий узел, когда он вызывается из другого компонента. Возможно, MyComponent размонтирован к моменту его вызова, и поэтому вы видите null
Еще {current: null}. Другой код - это просто App.jsx, который вызывает этот компонент для определенного маршрута. Я упростил его, чтобы просто рендерить на клиенте (без рендеринга на стороне сервера), но это не помогло ...
Не похоже, что компонент размонтируется.
Боже мой, я был на react 16.3, но на react-dom 16.2. изменение React-dom до версии 16.3 устранило проблему.
Большой. Изложите это как ответ, чтобы другие получили пользу
Я добавлял ref = {this.myRef} в компонент, когда он показывал {current: null}, потому что данные этого компонента не загружались одновременно. Итак, я использовал setTimeout в componentDidMount, тогда он работал. Итак, в следующий раз я использовал myRef в точном компоненте, и он работал. мне нужно было найти эту высоту элемента компонента. Итак, я использовал const height = this.myRef.current.clientHeight; в componentDidMount.
Ответы 3
Боже мой, я был на react 16.3, но на react-dom 16.2. изменение React-dom до версии 16.3 устранило проблему.
Я использовал this.myRef.value, который вернул мне значение null. Теперь я использую this.myRef.Текущий, который работает!
Это также может быть связано с тем, что ваш элемент не монтируется на componentDidMount().
Вместо этого попробуйте распечатать значение внутри componentDidUpdate().
Работает для меня. Кажется, с вашим кодом все в порядке.