如何从 React.js 中的另一个类组件调用方法

Posted 2023-02-23

【中文标题】如何从 React.js 中的另一个类组件调用方法

【英文标题】：How do I call a method from another class component in React.js

【发布时间】：2019-04-29 04:12:29

【问题描述】：

所以我必须对组件进行分类： Class1：有一个点击按钮 Class2：有一个方法调用我的 api 基本上，我想要的是调用一种方法，该方法可以从另一个类中设置和编辑一个类中的状态。但我总是失败。

示例：

Class1.js
export class Class1 extends Component 
   render() 
      return (
         <div onClick=must call Class2Method></div>
      )
   


Class2.js
export class Class2 extends Component 
   Class2Method()
      Here I call my API, I set & call states, ...
   
   render 
      return (
         <Class1 />
         Here I return my API content
      )    
      

我尝试了什么：

我尝试使用我的方法并在我的 App.js（class2 和 class1 的父级）中调用和设置我的状态；但后来我的 Class2.js 控制台说它找不到我的状态。 我也试过： 在我的 Class 2 和 在 Class1。

【问题讨论】：

您应该重构并取出调用 API 的函数并将其放入其他类中。然后，在两个组件中导入该类并调用方法。

你可以去github.com/burakozturk16/pigeon看看

【参考方案1】：

给你

Class1.js

       export class Class1 extends Component 
             render() 
                return (
                    <div onClick=this.props.callApi></div>
                )
            
       

Class2.js

在构造函数中绑定 callApi 函数或将其更改为箭头函数。

将callApi方法作为prop传递给class1组件，在上面的组件中作为this.props.callApi访问，传递给div的onClick。

 export class Class2 extends Component 
       callApi = () => 
           Here I call my API, I set & call states, ...
        
       render 
           return (
              <Class1 callApi=this.callApi />
                   Here I return my API content
            )    
          
   

【讨论】：

this.callApi()/>

Peter 这不是强制性的，但是当我们想要防止事件处理函数在每次渲染时被调用以及当我们想要将参数传递给函数时，它是很好的。如果我错了，请纠正我

不，你的理解是对的！但我认为这会有所帮助。

天哪，这行得通；非常感谢！有人能解释一下为什么它适用于箭头函数而不适用于基本方法吗？

组件中的所有事件处理函数都需要手动绑定或者做成箭头函数。因为需要绑定来访问函数内部的这个上下文，或者箭头函数有这个上下文可用

【参考方案2】：

首先：考虑使用Stateless Functional Components 而不是有状态组件，例如您的“Class1”不使用状态，仅使用道具。

现在，做你需要的......只需将你的方法作为道具传递，如下所示：

export class Class1 extends Component 
   render() 
      return (
         <div onClick=this.props.getData()>Click to Call API</div>
      );
   


export class Class2 extends Component 
   state = 
    data: null,
   ;
   
   callApi = () => 
      // Get API data
      const data = 
        hello: 'world',
      ;
      
      this.setState( data );
   
   
   render 
      return (
         <Class1 getData=this.callApi />
         JSON.stringify(this.state.data)
      )    
      

【讨论】：

Hemadri Dasari 的解决方案成功了；但是您关于“考虑使用无状态功能组件而不是……”的评论引起了我的注意。我要看看那篇文章，并尝试了解这如何帮助我避免未来的问题

【参考方案3】：

如何在 react.js 中调用另一个类组件的方法

使用道具

“render prop”指的是一种在 React 组件之间共享代码的技术，使用一个值为函数的 prop”-reactjs.org

示例

app.js

import Button from '../../pathtoButton';
export class App extents Component 
    constructor(props)
        super(props)
        this.state = 
             name:'John'
        
    
    sayHello()
        const  name  = this.message;
        alert(`Hello $name`
    
    render()
        return (
             <div>
                 <Button
                     value="click me"
                     whenClicked=this.sayHello
             </div>
        );
    

button.js

export class Button extents Component 
    constructor(props)
        super(props)
        this.state = 
             style:background:'red', color:'white',
        
    
    render()
        const  style  = this.state;
        const  whenClicked, value = this.props;
        return (
             <div>
                 <button style=style onClick=whenClicked>value</button>
             </div>
        );
    

说明

在app.js 中，我们导入了组件<Button/>，并使用props 将一个方法从app.js“sayHello”传递给了我们创建的名为whenClicked 的道具。在button.js 中，我们引用了this.props.whenClicked 并将其传递给onClick 属性。

sayHello 现在在两个组件之间共享，因为我们将方法作为 prop 传递给 <Button/> 组件。