0

Необходимо поместить в React-компонент HTML полученный извне и произвести с ним ряд манипуляций (навесить обработчики на ссылки). Для этого сделан простой компонент (см. ниже). Само навешивание обработчиков для простоты удалил из примера. Проблема в том, что при печати в консоль будет непустой HTMLCollection link но всегда нулевая длина link.length. Это признак того что в DOM элементы еще не помещены. Но по идее componentDidMount вызывается после рендеринга компонента и все уже должно быть в DOM. В итоге навесить обработчики не получается. Почему так происходит и каким образом навесить-таки обработчики?

class HTML extends React.Component {
  componentDidMount() {
    var root = document.getElementById(this.props.id);
    var link = root.getElementsByTagName('a');
    console.dir(link); // several elements here
    console.log('LENGTH: ' + link.length); // but length always 0
  }

  render() {
    return (  
      <div id={this.props.id} className='html' dangerouslySetInnerHTML={{__html: this.props.data}} />
    );
  }
}
12
  • чтобы проверить Ваше "по идее", воспользуйтесь setTimeout... дальше действуйте исходя из полученной информации
    – Dmytro
    21 июн 2019 в 8:27
  • Это не мое "по идее" это документация по реакту :( 21 июн 2019 в 8:30
  • Проверить ничего не мешает.
    – Dmytro
    21 июн 2019 в 8:38
  • Проверил. С таймаутом все работает. 21 июн 2019 в 8:38
  • а что за html вы вставляете?
    – ThisMan
    21 июн 2019 в 8:39

1 ответ 1

0

После рытья документации и экспериментов переписал все на использование Callback Refs С этим механизмом все заработало.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.