在React中访问子元素的DOM节点

时间:2016-06-10 23:42:54

标签: javascript dom svg reactjs

我正在使用React& SVG。

为了将视图框置于子<g>上,我需要通过调用子getBBox()元素上的<g> 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节点?

谢谢,

2 个答案:

答案 0 :(得分:4)

如果需要,您可以链接引用以进一步向下到达组件层次结构:

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

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

但这可能有点笨拙,通常不建议。 Refs通常应被视为对其组件的私有,因为以这种方式访问​​它们会奇怪地使父对象依赖于其子组件的命名方案。

更常见的替代方法是在子组件上公开函数:

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

答案 1 :(得分:1)

如果你把一个引用放在一个孩子上,你可以像这样在父母那里得到它,不需要寻找DOM节点:

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