Question

我知道如何从父类调用子方法。但是现在，当我想从另一个孩子调用一个孩子方法时，我遇到了问题。

如何从UserAuthenticationUI类调用在UserAuthenticationRequests类中声明的testMethod（）？可以从App类中调用testMethod（）。

（例如，我不需要从App类调用它）

父类

import React from 'react';
import UserAuthenticationUI from './UserAuthentication/UserAuthenticationUI';
import UserAuthenticationRequests from './UserAuthentication/UserAuthenticationRequests';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.userAuthenticationUI = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

componentDidMount(){
    this.userAuthenticationRequests.current.testMethod(); //there i can call method without problems
}

render(){
    return(
        <div>
            <UserAuthenticationUI ref={this.userAuthenticationUI} />
            <UserAuthenticationRequests ref={this.userAuthenticationRequests} />
        <div>
    )}
}
export default App;

1。我要呼叫2.child方法的孩子

import React from "react";
import App from '../App';
import UserAuthenticationRequests from './UserAuthenticationRequests';

class UserAuthenticationUI extends React.Component {
    constructor(props){
        super(props);

        this.app = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

    componentDidMount() {

        this.userAuthenticationRequests.current.testMethod(); //there i can not call
    }

    render(){    
        return(
            <div>
                <App/>
                <UserAuthenticationRequests ref={this.userAuthenticationRequests} />              
            </div>
        )}
    }

    export default UserAuthenticationUI;

收到此错误

TypeError: Cannot read property 'testMethod' of null

3。从父级和子级2.调用的类

  class UserAuthenticationRequests extends React.Component {
      testMethod(){
         console.log("test method")
      }

      render(){
          return(<div></div>)
      }
  }
  export default UserAuthenticationRequests;

Answer 1

当多个兄弟组件希望使用相同的方法或属性时，建议将其状态或方法提升。另外，您必须在尽可能少的情况下使用引用。在您的情况下，您会这样写

应用

class App extends React.Component {
    constructor(props) {
        super(props);

        this.userAuthenticationUI = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

componentDidMount(){
    this.testMethod(); 
}

testMethod(){
     console.log("test method")
}
render(){
    return(
        <div>
            <UserAuthenticationUI testMethod={this.testMethod} ref={this.userAuthenticationUI} />
            <UserAuthenticationRequests testMethod={this.testMethod} ref={this.userAuthenticationRequests} />
        <div>
    )}
}
export default App;

UserAuthenticationRequests

  class UserAuthenticationRequests extends React.Component {
      render(){
          return(<div></div>)
      }
  }
  export default UserAuthenticationRequests;

UserAuthenticationUI

class UserAuthenticationUI extends React.Component {
    constructor(props){
        super(props);

        this.app = React.createRef();
        this.userAuthenticationRequests = React.createRef();
    }

    componentDidMount() {

        this.props.testMethod(); 
    }

    render(){    
        return(
            <div>
                <App/>
                <UserAuthenticationRequests ref={this.userAuthenticationRequests} />              
            </div>
        )}
    }

    export default UserAuthenticationUI;

儿童之间的出入方法

1 个答案: