Почему document.getEelementById возвращает null в react?

Question

[Vanya Huk]

Почему document.getEelementById возвращает null в react, хотя при вызове из консоли все работает?

Answer 1

[Алексей Уколов]

Потому что в тот момент, когда вы вызваете этот метод внутри реакта, ваш компонент ещё не примонтирован или не отрендерен. Реакт не ломает специально стандартные методы, чтобы вам было сложнее работать. Покажите свой код и мы сможем вам объяснить что именно вы делаете неправильно.

Comments

[Vanya Huk]

class ModelsStat extends Component {


	clickPoint( id ) {

	console.log(document.getElementById(  id );  
}


    render() {
            return ( <div id={ 'chartItems'}  onclick={this.clickPoint.bind(this)}> {
                        this.props.auto.stat_models.map((item, index) => {
                                return ( < div 
                                        id={item.id}
                                        key = {index}
                                        className = "chart-item row" > </div>)})}
                            < /div>)
                            }
                        }

[Алексей Уколов]

Ну вот, вы делаете какую-то ерунду.

1. В clickPoint вам в качестве первого аргумента приходит объект события, а не какой-то магический id - ведь это обычный обработчик события. В этом объекте есть поля target/currentTarget, если вам нужен конкретный элемент в DOM.
   
2. Скорее всего, вам не нужен конкретный элемент в DOM, а нужно что-то другое. В React напрямую работать с DOM нужно крайне редко и обычно это индикатор того, что программист не понимает зачем нужен React.
   

[Vanya Huk]

Алексей Уколов, мне нужно сделать скролл к компоненту с таким id
я там упростил, предположыте, что id приходит в функцию

[Алексей Уколов]

Ну а вы тогда предположите, что у вас всё работает как надо :)
Без кода я вам более подробный ответ, чем написан выше, дать не могу. Откуда мне знать что там у вас с компонентами происходит, как они рендерятся и изменяются?

[Vanya Huk]

Алексей Уколов,

class ModelsStat extends Component {


  clickPoint( id, e ) {

  console.log(document.getElementById(  id );  
}


    render() {
            return ( <div id={ 'chartItems'}  onclick={this.clickPoint.bind(this, 21)}> {
                        this.props.auto.stat_models.map((item, index) => {
                                return ( < div 
                                        id={item.id}
                                        key = {index}
                                        className = "chart-item row" > </div>)})}
                            < /div>)
                            }
                        }

так подойдет?)

[Алексей Уколов]

Ну а как рендерится-то элемент с id 21? Сделайте уже нормальный пример на jsfiddle.