如何从 React JS 中的另一个组件获取引用

Question

主 App 组件中的代码如下：

class App extends Component {
  componentDidMount(){
      console.log(this.ref);
      debugger;
  }

  render() {

    return (
        <div>
            <Header/>
            {this.props.children}
            <Footer/>
        </div>
    );
  }
}

使用{this.props.children}呈现的组件之一是 HomePage，其中是带有 refs 的部分。

HomePage的代码如下：

render(){
     return (
        <div className="homeMain">
            <section ref="info"> <Info/> </section>

            <section ref="contact"> <Contact /> </section>
       </div>
    );
}

我怎样才能让 App 组件中的那些 refs 能够将它们作为道具传递给标题？

我正在尝试在 App 组件中的 componentDidMount 中执行此操作，但console.log(this.refs)为空。

有什么建议吗？

编辑

整个 App 组件：

import React, {Component} from 'react';
import Footer from './common/footer';
import Header from './common/header';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as actions from './components/homepage/login/authActions';

class App extends Component {
    componentDidMount(){
        console.log(this.props.children.refs);
        debugger;

    }

    render() {
        return (
            <div>
                <Header route={this.props.location.pathname}
                        language={this.props.language.labels}
                        authenticated={this.props.authenticated}
                        signoutAction={this.props.actions}
                        offsets={this.props.offsets}
                />
                {React.cloneElement(this.props.children, {
                    currentLanguage: this.props.language.labels,
                    authenticated: this.props.authenticated
                })}
                <div className="clearfix"/>
                <Footer currentLanguage={this.props.language.labels}/>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        language: state.language,
        authenticated: state.auth.authenticated,
        offsets: state.offsets
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

React的主要想法是将道具从父母传递给孩子（甚至更深层次的孩子 - 我的意思是孙子）

因此，当我们希望父级执行从子级触发（或属于子级）的操作时，我们可以在父级中创建一个回调函数，然后将其作为道具传递给子级

根据您的喜好，这是一个演示如何通过多级孩子向下传递回调函数以及如何触发它们：

强制React容器刷新数据

重定向重新初始化类

在您的情况下，您可以按如下方式访问子组件的引用:(使用字符串作为参考 - 如您所述）

父组件：

import React, { Component } from 'react';
// import Child component here

export default class Parent extends Component {
  constructor(props){
    super(props);
    // ...
    this.getRefsFromChild = this.getRefsFromChild.bind(this);
  }    

  getRefsFromChild(childRefs) {
    // you can get your requested value here, you can either use state/props/ or whatever you like based on your need case by case
    this.setState({
      myRequestedRefs: childRefs
    });
    console.log(this.state.myRequestedRefs); // this should have *info*, *contact* as keys
  }    

  render() {
    return (
      <Child passRefUpward={this.getRefsFromChild} />
    )
  }  
}

子组件：

import React, { Component } from 'react';

export default class Child extends Component {
  constructor(props){
    super(props);
    // ...
  }    

  componentDidMount() {
    // pass the requested ref here
    this.props.passRefUpward(this.refs);

  }    

  render() {
    return (
      <div className="homeMain">
        <section ref="info"> <Info/> </section>

        <section ref="contact"> <Contact /> </section>
      </div>          
    )
  }  
}  

Answer 2

ref是每个this.props.children属性，因此你可以通过this.props.children上的ref属性访问父组件中的子组件的ref

确保在componentDidMount之后访问ref

编辑：

如果有效，请尝试以下代码集：

var myChild= React.Children.only(this.props.children);
var clone = React.cloneElement(myChild, { ref: "myRef" });

Answer 3

根据Refs to Components ，基于字符串的ref - 虽然没有被弃用 - 被基于回调的语法所取代，例如：

<section ref={sectionElement => this.sectionElement = sectionElement}>
    <Info/>
</section>

基于字符串的ref可能很快就会被弃用，这也意味着this.refs也会受到影响。 因此，我建议您考虑这些，并提供实例方法或属性来公开引用：

class HomePage extends Component {
    render() {
        return (
            <div className="homeMain">
                <section ref={infoSection => this.infoSection = infoSection}>
                    <Info/>
                </section>

                <section ref={contactSection => this.contactSection = contactSection}>
                    <Contact />
                </section>
            </div>
        );
    }
}

之后，您还需要获取一个ref的HomePage ，然后您可以在其上访问infoSection和contactSection作为属性，然后您可以将其作为道具传递给Header ，例如：

<HomePage ref={homePage => this.homePage = homePage} ... />
<Header sections={[this.homePage.infoSection, this.homePage.contactSection]} ... />

您的具体应用程序的结构是未知的我，但总的原则将工作无处不在：揭露ref通过实例方法或属性S，获得ref的组件暴露其ref S，然后访问内部ref通过公开的属性秒。

---

编辑

如果你现在继续使用基于字符串的ref ，你可以定义一个getter （虽然refs也可以直接访问） ：

Object.defineProperty(this, "infoSection" {
    get: () => this.refs["infoSection"]
});

Answer 4

如果您的组件是相关的（父级和子级），您可以将ref分配给子级，并可以在父级中使用它

如果没有那么getElementById将来救援，但在选择它时请指定html类型ex。

const info = (document.getElementById("info") as HTMLDivElement)