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

【问题标题】：Access Child Element's DOM Node in React在 React 中访问子元素的 DOM 节点
【发布时间】：2016-10-12 00:42:52
【问题描述】：

我正在使用 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

确实，'SVG' 元素中的 this.refs 是空 obj。如何访问子 <g> 元素，以便访问其 DOM 节点？

谢谢，

【问题讨论】：

标签： javascript dom svg reactjs

【解决方案1】：

如果需要，您可以将 ref 链接到组件层次结构的更下方：

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

【讨论】：

谢谢布拉德，我采用了在孩子身上暴露功能的第二种选择。

【解决方案2】：

如果你把一个 ref 放在一个孩子上，你可以像这样在父级中得到它，不需要寻找 DOM 节点：

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

【讨论】：