Ссылка на экземпляр DOM не определена при передаче для рендеринга проп - PullRequest
Новая
       6

Ссылка на экземпляр DOM не определена при передаче для рендеринга проп

0 голосов
/ 06 сентября 2018

Я пытаюсь использовать вложенные реквизиты рендеринга, чтобы создать кнопку, которая по выбору принимает значок, который, в свою очередь, по желанию принимает всплывающую подсказку, которая будет отображаться при наведении или нажатии на значок. Я думаю, что для этого мне нужно будет передать ссылку на Icon дочернему компоненту Tooltip.

На основании того, что я прочитал здесь Я делаю 

  // Icon

  componentDidMount() {
    this.iconInstance = ReactDOM.findDOMNode(this);
    console.log('Icon mounted, instance', this.iconInstance);
  }

  render() {
    console.log('Icon render iconInstance', this.iconInstance);
    return (
      <span style={{ display: 'inline' }}>
        <span>{this.props.iconText}</span>
        {this.props.tooltip({ iconInstance: this.iconInstance })}
      </span>
    );
  }

А затем в Tooltip будет добавлен слушатель 

  componentDidMount() {
    console.log('Tooltip mounted', this.props);
    // fails because iconInstance is undefined
    // this.props.iconInstance.addEventListener(
    //   this.props.mouseEvent,
    //   this.showTooltip
    // );
  }

Сразу после того, как я установил this.iconInstance, он может быть зарегистрирован, так что, кажется, работает. Однако в функции рендеринга я получаю неопределенный.

Возможно, есть способ использовать forwardRef для этого, однако я не смог найти способ передать компонент Tooltip в качестве реквизита рендеринга из компонента App через Icon и добавить ref поддержать его, например, {this.props.tooltip(this.iconInstance)} получает сообщение об ошибке, в котором говорится, что вы не можете передавать ссылки таким образом, и это не удастся.

Полный код

1 Ответ

0 голосов
/ 06 сентября 2018

ComponentDidMount - это метод, который выполняется после первого вызова метода рендеринга.Это метод ComponentWillMount, который вызывается перед выполнением метода рендеринга.

...