如何獲取組件的當前本機元素？

我知道你可以調用React.findDOMNode（this），但是有另一種方法嗎？我想知道是否保留了一個引用（並且在組件安裝時明顯可用）。如何獲取組件的當前本機元素？

2016-07-01 chrisp

進一步閱讀使我的方法已過時「getDOMNode（）」。我很好奇沒有一個ReactComponent的屬性是什麼原因，一旦它被掛載就引用DOM元素。 – chrisp

反應，裁判已經有一段時間的移動目標。

Facebook has said字符串引用已被棄用。

如果您之前曾使用過React，那麼您可能熟悉ref屬性是字符串的舊API，如「textInput」，並且DOM節點以this.refs.textInput的形式訪問。我們建議不要這樣做，因爲字符串參考有一些問題，被認爲是遺留問題，並且可能會在未來版本之一中被刪除。如果你目前使用this.refs.textInput來訪問ref，我們推薦使用回調模式。

當前的最佳做法是回調參考。理想情況下，您可以使用setState管理組件狀態。然而，如果您需要使用其他庫或動畫，則需要引用。另請參見：ReactDOM.findDOMNode()

JSFiddle

const HowdyPardner = React.createClass({ 
    _getHeaderEl: function(el) { 
    this.headerEl = el; 
    }, 
    componentDidMount() { 
    this.headerEl.textContent = 'YEEHAW'; 
    }, 
    render: function() { 
    return (
    <h1 ref={this._getHeaderEl}>Howdy Pardner!</h1> 
    ); 
    } 
});

來源

2017-01-27 22:53:47 toddsby

我不知道你當前的本地元素是什麼意思，但是：你可以使用參考文獻。

class Container extends Component { 
    componentDidMount(){ 
    this.refs.main.innerHTML = "Yep"; 
    } 

    render(){ 
    return (
     <div ref="main" >Hello World</div> 
    ) 
    } 
}

通常，上面的代碼在屏幕上顯示「Yep」。

只是把ref財產的任何元素例如：<div ref="main">Hello World</div>，你可以訪問裁判在componentDidMount：this.refs.main

來源

2016-07-02 00:14:45

我注意到ref回調比字符串引用更受歡迎。是否真的沒有辦法將「this」作爲本地dom元素（假設它已經掛載）？ – chrisp

爲什麼ref回調首選？ – JordanHendrix

注意：儘管字符串參考不被棄用，但它們被認爲是遺留的，並且在將來某個時候可能會被棄用。回調參考是首選。 [引用組件]（https://facebook.github.io/react/docs/more-about-refs.html） – chrisp

如何獲取組件的當前本機元素？

回答

相關問題