通過DOM元素作爲道具在React

所以我有一個組件需要一個DOM元素作爲道具傳入。我試圖用它在另一個組件，像這樣：通過DOM元素作爲道具在React

<div> 
     <div className="myPropDiv" ref="myPropDiv">...</div> 
     <CustomComponent view={ this.refs.myPropDiv } /> 
    </div>

但是，這並不工作，因爲（我懷疑）的DOM還沒有在我打電話this.refs.myPropDiv點被渲染。我將如何完成這樣的事情？

來源

2016-01-22 andy

不要這樣做，您會將子組件緊密地耦合到其父組件。相反，觸發一個事件或創建一個回調，以便父組件可以做出相應的響應。您應該解釋您計劃如何使用它，以便我們提供更徹底的解決方案 –

你不能直接訪問DOM，但你可以訪問DOM元素與ReactDOM.findDOMNode(component)一個陣營組成部分，因此使用它componentDidMount裏面叫你會使用：如果您

var MyComponent = React.createComponent({ 
    ... 
    componentDidMount: function() { 
    var component = this, 
     node = ReactDOM.findDOMNode(component); 
    } 
    ... 
});

然後正在尋找父DOM節點的子節點，您可以從該節點正常穿越DOM，例如：

var childNode = node.querySelectorAll('.child-node-class')[0];

然後，你可以把它傳遞給無論你本來想它。

來源

2016-01-22 15:02:36 toomanyredirects

在大多數情況下，這不是一個好主意，至少它看起來並不像是遵循React方式。

首先通過refs獲取該div，您不會獲取DOM元素，而是支持該div的實例。您可以像toomanyredirects建議一樣獲取DOM元素。

無論如何你想達到什麼目的？ React的一個優勢是你不必混淆原始的DOM，而是使用虛擬的。如果你只想在你的組件中顯示那個div，比這樣傳遞。

<CustomComponent> <div className="myPropDiv" ref="myPropDiv">...</div> </CustomComponent>

然後，您可以訪問該分區的CustomComponent爲props.children內。

來源

2016-01-22 16:21:16

通過DOM元素作爲道具在React

回答

相關問題