Доступ к DOM-узлу дочернего элемента в реакторе

Question

Я работаю с React & SVG.

Чтобы центрировать окно просмотра на ребенке <g>, мне нужно получить значение «BBox», вызвав функцию getBBox() 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' пустой OBJ. Как получить доступ к элементу child <g>, поэтому я могу получить доступ к его узлу DOM?

Спасибо,

Answer 1

Если поставить реф на ребенка вы можете получить его в родительском, как это так, нет необходимости искать для узла DOM:

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

Answer 2

Вы не можете цепи рефов, чтобы достичь далее вниз компонента иерархии в случае необходимости:

// 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 так что вы можете проверить его + DOCS для справки.