如何从React JS中的另一个组件获得refs

How to get refs from another component in React JS

本文关键字：组件 另一个 refs React JS      更新时间：2023-09-26

App主组件中的代码如下:

class App extends Component {
  componentDidMount(){
      console.log(this.ref);
      debugger;
  }
  render() {
    return (
        <div>
            <Header/>
            {this.props.children}
            <Footer/>
        </div>
    );
  }
}

与{this.props.children}呈现的组件之一是主页，其中有引用的部分。

主页代码如下:

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

我怎么能得到那些refs内的应用组件能够传递它们作为道具头?

我试图在应用组件的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);

React的主要思想是将props从父级向下传递给子级(甚至到更深层次的子级——我的意思是孙辈)

因此，当我们想让父类做一些被(或属于)子类触发的事情时，我们可以在父类中创建一个回调函数，然后把它作为props传递给子类

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

强制React容器刷新数据

重定向重新初始化类

在您的情况下，您可以从子组件访问引用，如下所示:(使用string for ref -如您所述)

父组件:

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>          
    )
  }  
}

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" });
相关文章：