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

Question

我正在使用 React 和 SVG。

为了使 View 框在 child 身上居中 <g> ，我需要通过调用 getBBox() 来获取“BBox”值子项上的 API 函数 <g>元素。我的代码如下所示:

// <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”元素内部是空对象。我如何访问 child <g>元素，以便我可以访问它的 DOM 节点？

谢谢，

Answer 1

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

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

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

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

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

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供引用。