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

Question

所以我必须对组件进行分类：

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

我尝试了什么：

1. 我尝试使用我的方法并在我的 App.js（class2 和 class1 的父级）中调用和设置我的状态；但后来我的 Class2.js 控制台说它找不到我的状态。
2. 我也试过：< Class1 method={this.Class2Method} /> 在我的 Class 2 和 < div onClick={this.props.method} > 在 Class1。

原文由 Cédric Bloem 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

干得好

Class1.js

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

Class2.js

1. 在构造函数中绑定 callApi 函数或将其更改为箭头函数。
2. 将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
               )
          }
      }

原文由 Hemadri Dasari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

使用道具

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

例子

应用程序.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>
        );
    }
}

按钮.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>
        );
    }
}

解释

In app.js we imported the component <Button/> and using props we passed a method from app.js “ sayHello ” to我们创建的道具名为 whenClicked 。在 button.js 我们引用了 this.props.whenClicked 并将其传递给 onClick 属性。

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

原文由 Luke Walker 发布，翻译遵循 CC BY-SA 4.0 许可协议