React:如何访问this.props.children中的refs

我想调用子组件的函数.
是否有可能从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 (
          

            {this.props.children}
          
        );
    }
});

var Panel = React.createClass({

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

    render: function () {
        return (
          

            Lorem   ipsum dolor sit amet 
          
        );
    }
});

var MainComponent = React.createClass({
    render: function () {
        return (
           
            
           
        );
    }
});

ReactDOM.render(
  ,
  document.getElementById('container')
);

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

提前致谢

Ref in React是组件与其所有者之间的关系,而您想要的是元素与其父元素之间的关系.父子关系是不透明的,父级只接收渲染中的子元素,永远不会访问已解析的组件.

在您的情况下,ref="specificPanel"建立从MainComponent到的链接Panel.如果你想调用Panelfrom的方法ComponentSection,它应该拥有Panels而不是作为子节点接收它们.

你总是可以创造性地React.Children.map和React.createElement(手工克隆元素,从而从原始所有者那里窃取它们),但这会带来一些严重的潜在缺陷.更好的方法可能是重新考虑组件树的所有权结构.