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

IT技术 javascript reactjs
2021-05-02 18:48:20

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

我做了一个小demo：https : //jsfiddle.net/69z2wepo/26929/

提前致谢

2个回答

React 中的 Ref 是组件与其所有者之间的关系，而您想要的是元素与其父元素之间的关系。父子关系是不透明的，父级仅在渲染时接收子元素，而永远无法访问已解析的组件。

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

您总是可以使用React.Children.mapand React.createElement（手动克隆元素，从而从原始所有者那里窃取它们）来发挥创意，但这会引入一些严重的潜在陷阱。更好的方法可能是重新考虑组件树的所有权结构。

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

您还可以重构您的代码，以便只<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。

其它你可能感兴趣的问题
上一篇React：隐藏与删除组件 下一篇Ender 3 上的激光雕刻机无需占用重要端口