如何重構findDOMNode出

我知道findDOMNode是一個no-no，我有一種感覺，我可以擺脫它。如何重構findDOMNode出

我最近重構了我的組件，使用Button組件代替button標籤。現在看起來是這樣的：

<Button 
    ref={(input) => this.toggleZipLink = input}> 
    Add New Zip 
</Button>

，我有我的組件的功能即會從另一個組件通過道具叫做：

shouldClickOutside(e) { 
    if (findDOMNode(this.toggleZipLink).contains(e.target)) { 
     return false; 
    } 
    return true; 
}

我必須使用findDOMNode因爲this.toggleZipLink是一個組件。如果Button是button我不需要它。

有沒有什麼方法可以將內部button標籤暴露給它的父級？我注意到this.toggleZipLink有一個refs對象，但它似乎是空的。作爲參考，Button是而不是無狀態函數組件，所以它應該支持ref的。

解決方案編輯：

裏面Button我加了REF ref={(button) => this.button = button}。然後在父div中，我可以通過this.toggleZipLink.button訪問它。

來源

2017-04-19 Dave

您可以在Button（名爲，如buttonRef）上公開一些其他非參考支柱，以通過您的ref回調。然後Button的渲染將this.props.buttonRef作爲ref傳遞給底層button。

class Button extends Component { 
    render() { 
    const { buttonRef, ...passThroughProps } = this.props; 
    return <button {...passThroughProps} ref={buttonRef} /> 
    } 
}

此外，您可以只取裁判到Button，然後通過toggleZipLink.whateverYouNamedYourRef訪問它。

通過refs很難，需要一些樣板。

來源

2017-04-19 22:34:46

如何重構findDOMNode出

回答

相關問題