在React中訪問子元素的DOM節點

Question

我正在使用React & SVG。

爲了將子視圖集中在子項<g>上，我需要通過在子元素<g>上調用getBBox() API函數來獲取'BBox'值。我的代碼如下所示：

// <SVG> Element 
const SVGParent = React.createClass({ 
    componentDidMount : function(){ 
    let eleBBox = ReactDOM.findDOMNode(this.refs.gEle).getBBox(); 
... 

// Child <g> Element 
const TemplateParent = React.createClass({ 
    render : function(){ 
     return(
     <g ref = "gEle"> 
... 

上面一行let eleBBox = ReactDOM.findDOMNOde(this.refs.gEle)返回錯誤： TypeError: _reactDom2.default.findDOMNode(...) is null

事實上，在this.refs內 'SVG' 元素是空着的OBJ。 如何訪問子元素<g>，以便我可以訪問其DOM節點？

感謝，

Answer 1

如果你把一個裁判對孩子，你可以得到它在像這樣的家長，沒有必要去尋找DOM節點：

const SVGParent = React.createClass({ 
    componentDidMount : function(){ 
    let eleBBox = this.refs.gEle 
    ... 

Answer 2

你可以連裁判到達再往下一個組件層次結構如果需要的話：

// Parent Element 
componentDidMount: function() { 
    let eleBBox = this.refs.templateRef.refs.gEle; 
} 

// Adding a ref to your child component 
<TemplateParent ref='templateRef' ... /> 

但是，這可能會變得有些笨拙，通常不建議。參考文獻通常應該視爲其組成部分是私人的，因爲以這種方式訪問​​這些文獻會讓父母依賴其子女的命名方案。

一個更常見的替代方法是暴露的子組件上的功能：

const Parent = React.createClass({ 
    componentDidMount: function() { 
    let eleBBox = this.refs.svgRef.getG(); 
    } 

    render: function() { 
    return(
     <Child ref='svgRef' /> 
    ); 
    } 
} 

const Child = React.createClass({ 
    getG: function() { 
    return this.refs.gEle; 
    } 

    render: function() { 
    return(
     <svg ...> 
     <g ref='gEle' ...> 
      <circle .../> 
      <circle .../> 
     </g> 
     </svg> 
    ); 
    } 
} 

這裏的工作DEMO這樣你就可以檢查出來+ DOCS以供參考。