在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（...）为null

确实，在'SVG'元素内部的this.refs为空对象。 我如何访问子元素<g>，以便可以访问其DOM节点？

谢谢

- Kayote

Answer 1

您可以链接引用来深入到组件层次结构中的更深层次（如果需要）：

// 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供您查看：DEMO，同时还可以参考文档。

- Brad Colthurst

---

谢谢Brad，我采用了在子组件上公开函数的第二个选项。 - Kayote

Answer 2

如果您在子元素上放置一个ref，就可以像这样在父级中获取它，无需查找DOM节点：

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

- omarjmh