在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以供参考。