在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

實際上，'SVG'元素中的this.refs是空的obj。 如何訪問子<g>元素，以便可以訪問其DOM節點？

謝謝，

Answer 1

如果需要，您可以鏈接引用以進一步向下到達組件層次結構：

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

Answer 2

如果你把一個引用放在一個孩子上，你可以像這樣在父母那里得到它，不需要查找DOM節點：

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