React, как получить доступ к элементу DOM в моей функции рендеринга от того же компонента

Question

Мне интересно, что лучше всего подходит для доступа к элементам DOM внутри моей функции рендеринга из того же компонента. Обратите внимание, что я буду показывать этот компонент несколько раз на странице.

например.

var TodoItem = React.createClass({ 
    ... 
    render:function(){ 

     function oneSecLater(){ 
      setTimeout(function(){ 
      //select the current className? this doesn't work, but it gives you an idea what I want. 
      document.getElementsByClassName('name').style.backgroundColor = "red"; 
       )}, 1000); 
     } 

     return(
      <div className='name'>{this.oneSecLater}</div> 
     ) 



}) 

Answer 1

Здесь нет необходимости использовать setTimeout. Существуют методы жизненного цикла для компонента, из которых componentDidMount вызывается после рендера. Таким образом, вы можете получить ссылку на свой div в методе.

var TodoItem = React.createClass({ 
    ... 
    componentDidMount: function() { 
    if(this.myDiv) { 
     this.myDiv.style.backgroundColor = "red"; 
    } 
    } 
    render:function(){ 
    return(
     <div className='name' ref = {c => this.myDiv = c}></div> 
    ); 
}); 

Answer 2

Вы можете использовать ref callback для доступа к элементу DOM в реакции, которая является то, что React Docs рекомендует следовать

и сделать это в функции componentDidMount жизненного цикла, как рефы не будут доступны до DOM создается

var TodoItem = React.createClass({ 
    ... 
    componentDidMount() { 
      setTimeout(function(){ 
       this.myDiv.style.backgroundColor = "red"; 
     )}, 1000); 
    } 
    render:function(){ 

     return(
      <div className='name' ref={(ele) => this.myDiv = ele}></div> 
     ) 

}) 

DOCS

Answer 3

Вы можете использовать ReactDOM.findDOMNode(this) для доступа к базовому узлу DOM. Но доступ к узлу DOM и манипулирование, как и вы, противоречат стилю программирования React. Лучше использовать переменную состояния и вызывать метод setState для повторной рендеринга DOM.