Javascript 如何将函数从一个组件调用到另一个组件？反应

我在react.js工作。我已经创建了一个组件

Backend.jsx

。我希望它作为一个服务（比如angular）工作，在这里我可以发送API请求。我想在一些其他组件中调用

后端的方法

我在组件中调用了这个后端服务，并尝试使用props在
BackendService
中发送数据和获取数据

但显然，这是行不通的

这是我的代码

在组件中：

constructor(props) {
    super(props);
    this.state = {  }
    this.login(props)
}
login = (props) =>
{
    console.log('login', props);
};

这将在表单提交后调用

handleLoginSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.data);
    <BackendService onSendData = {this.state.data} />
}

有什么建议可以在
组件
中调用此
登录
方法吗。或任何其他建议，以获取服务中的组件数据。
您可以尝试以下方法：

1.Component.js

class Componet extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      data:"this state contain data"
    }

    this.backendServiceRef = React.createRef(); // Using this ref you can access method and state of backendService component.
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => {

          this.backendServiceRef.current.login()  

       }}>click</button>

        <BackendService ref={this.backendServiceRef} onSendData = {this.state.data}></BackendService>
      </div>
    );
  }
}

export default Componet;  

类Componet扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
数据：“此状态包含数据”
}
this.backendServiceRef=React.createRef（）；//使用此ref可以访问backendService组件的方法和状态。
}
render（）{
返回(
{
this.backendServiceRef.current.login（）
}}>点击
);
}
}
导出默认组件；

2.BackendService.js

class BackendService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  login = (props) => {
    alert("login call")
  };

  render() {
    return (
      <div>
        Backend service component
      </div>
    )
  }
}

类后端服务扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
}
登录=（道具）=>{
警报（“登录呼叫”）
};
render（）{
返回(
后端服务组件
)
}
}
您可以尝试以下方法：

1.Component.js

class Componet extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      data:"this state contain data"
    }

    this.backendServiceRef = React.createRef(); // Using this ref you can access method and state of backendService component.
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => {

          this.backendServiceRef.current.login()  

       }}>click</button>

        <BackendService ref={this.backendServiceRef} onSendData = {this.state.data}></BackendService>
      </div>
    );
  }
}

export default Componet;  

类Componet扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
数据：“此状态包含数据”
}
this.backendServiceRef=React.createRef（）；//使用此ref可以访问backendService组件的方法和状态。
}
render（）{
返回(
{
this.backendServiceRef.current.login（）
}}>点击
);
}
}
导出默认组件；

2.BackendService.js

class BackendService extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  login = (props) => {
    alert("login call")
  };

  render() {
    return (
      <div>
        Backend service component
      </div>
    )
  }
}

类后端服务扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
}
登录=（道具）=>{
警报（“登录呼叫”）
};
render（）{
返回(
后端服务组件
)
}
}
您可以使用react REF调用登录方法。您可以使用事件发射器实现这一点。您可以给我看一些代码人员吗？我是新来的。Nagesh Saurssaurav您可以使用react REF调用登录方法您可以使用事件发射器实现这一点。您可以给我看一些代码人员吗？我是新来的。你的回答很有帮助。但是我不想在
后端中使用渲染功能。你能帮我吗？你的回答很有帮助。但是我不想在
后端中使用渲染功能。你能帮我做这个吗？