Невозможно использовать React.RefObject с машинописью

Question

Я портирую этот модуль класса пример на машинописный текст, но я не могу исправить это определение определения объекта.

Я определил держатель ссылки как:

private wrapperRef:React.RefObject<HTMLDivElement>

Исходный обработчик нужно было изменить, чтобы он использовал текущее свойство, имеет следующее:

if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
  alert('You clicked outside of me!');
}

, но this.wrapperRef.current всегда приходит undefined.

Что я делаю не так?

Вот моя песочница .

Answer 1

Вы не правильно создаете или настраиваете свою ссылку . В компоненте класса вы создаете ссылку с помощью React.createRef():

constructor(props) {
  super(props)
  this.wrapperRef = React.createRef<HTMLDivElement>()
}

и затем присваиваете его значение, передавая его непосредственно свойству ref некоторого элемента.

render() {
  return <div ref={this.wrapperRef}>{this.props.children}</div>;
}

Теперь он должен автоматически установить this.wrapperRef.current после первого рендера. Вам не нужен метод setWrapperRef.

Песочница