React，如何從同一組件訪問我的渲染函數中的DOM元素

我想知道從同一個組件中訪問我的渲染函數內的DOM元素的最佳做法是什麼。請注意，我將在頁面上多次渲染此組件。React，如何從同一組件訪問我的渲染函數中的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> 
     ) 



})

來源

2017-02-15 wonghenry

在這裏，不需要使用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> 
    ); 
});

來源

2017-02-15 07:20:46

您可以使用ref callback訪問反應的DOM元素，這是什麼陣營文檔建議遵循

，做的是，在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

來源

2017-02-15 06:38:16

您可以使用ReactDOM.findDOMNode(this)來訪問底層的DOM節點。但是，訪問DOM節點並像你一樣操作是違反React編程風格的。最好使用狀態變量並調用setState方法來重新呈現DOM。

來源

2017-02-15 06:38:45 VJAI

React，如何從同一組件訪問我的渲染函數中的DOM元素

回答

相關問題