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

参考React是组件与其 owner 之间的关系，而您想要的是元素与其父之间的关系。父子关系是不透明的，父级只接收渲染中的子元素，永远不会访问已解析的组件。

在您的情况下，ref="specificPanel"建立了从MainComponent到Panel的链接。如果您想从Panel调用ComponentSection的方法，则应该拥有Panel s而不是将其作为子项接收。

您可以随时使用React.Children.map和React.createElement进行创作（手工克隆元素，从而从原始所有者处窃取它们），但这会带来一些严重的潜在陷阱。更好的方法可能是重新考虑组件树的所有权结构。

Answer 2

您正尝试在ref而不是React组件上设置<div>。

您还可以重构代码，以便只有<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 /> 
    );
  }
});

这是working JSFiddlle。

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

2 个答案: