React：如何訪問this.props.children中的refs

Question

我想調用子組件的函數。
是否有可能從React中的this.props.children獲取引用。

var ComponentSection = React.createClass({

    componentDidMount: function() {
      // How to access refs in this.props.children ?
      this.refs.inner.refs.specificPanel.resize();
    },

    render: function () {
        return (
          <div className="component-section" ref="inner">
            {this.props.children}
          </div>
        );
    }
});

var Panel = React.createClass({

    resize: function() {
        console.log('Panel resizing');
    },

    render: function () {
        return (
          <div className="Panel">
            Lorem   ipsum dolor sit amet 
          </div>
        );
    }
});

var MainComponent = React.createClass({
    render: function () {
        return (
           <ComponentSection>
            <Panel ref="specificPanel"></Panel>
           </ComponentSection>
        );
    }
});

ReactDOM.render(
  <MainComponent></MainComponent>,
  document.getElementById('container')
);

我做了一個小小的演示： https ： //jsfiddle.net/69z2wepo/26929/

提前致謝

Answer 1

Ref in React是組件與其所有者之間的關系，而您想要的是元素與其父元素之間的關系。 父子關系是不透明的，父級只接收渲染中的子元素 ，永遠不會訪問已解析的組件 。

在您的情況下， ref="specificPanel"建立從MainComponent到Panel的鏈接。 如果你想從ComponentSection調用Panel方法，它應該擁有Panel而不是作為子節點接收它們。

您可以隨時使用React.Children.map和React.createElement （手工克隆元素，從而從原始所有者那里竊取它們）獲得創意，但這會帶來一些嚴重的潛在缺陷。 更好的方法可能是重新考慮組件樹的所有權結構。

Answer 2

您正在嘗試在<div>而不是React組件上設置ref 。

您還可以重構代碼，以便只有<ComponentSection>需要知道<Panel>組件，並在其渲染函數中呈現它。

var ComponentSection = React.createClass({
  componentDidMount: function() {
    this.refs.inner.resize();
  },

  render: function() {
    return ( 
        <div className="component-section">
            <Panel ref="inner"/>
        </div>
    );
  }
});

var MainComponent = React.createClass({
  render: function() {
    return ( 
        <ComponentSection /> 
    );
  }
});

這是一個有效的JSFiddlle 。