Javascript 从子对象到子对象的访问方法

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

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

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

如何从UserAuthenticationUI类调用UserAuthenticationRequests类中声明的testMethod（）？ 可以从App类调用testMethod（），而不会出现问题

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

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

（例如，我不需要从应用程序类调用它）

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

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

父类

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;

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

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

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

3。类，该类从父级和2调用。儿童

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

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

class UserAuthenticationRequests扩展了React.Component{
testMethod（）{
控制台日志（“测试方法”）
}
render（）{
返回（）
}
}
导出默认UserAuthenticationRequests；

当多个同级组件想要使用相同的方法或属性时，建议提升该状态或方法。此外，必须在尽可能少的情况下使用ref。在你的情况下，你会这样写

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

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

应用程序

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

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

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;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.userAuthenticationUI=React.createRef（）；
this.userAuthenticationRequests=React.createRef（）；
}
componentDidMount（）{
this.testMethod（）；
}
testMethod（）{
控制台日志（“测试方法”）
}
render（）{
返回(
)}
}
导出默认应用程序；

用户身份验证请求

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;

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

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

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

class UserAuthenticationRequests扩展了React.Component{
render（）{
返回（）
}
}
导出默认UserAuthenticationRequests；

UserAuthenticationUI

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

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

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;

类UserAuthenticationUI扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.app=React.createRef（）； this.userAuthenticationRequests=React.createRef（）； } componentDidMount（）{ this.props.testMethod（）； } render（）{ 返回( )} } 导出默认UserAuthenticationUI；

---

对于右侧，我不需要从应用程序调用测试方法。这只是我能做的一个例子，但不是来自不同的班级。所以，如果我不在App类中使用userAuthenticationRequests类。我可以从UserAuthenticationUI调用它？在您的情况下，由于应用程序呈现

UserAuthenticationUI

和

UserAuthenticationUI

呈现

App

如果我不在UserAuthenticationUI中呈现应用程序，是否有解决方案？