Question

所以我必须对组件进行分类：
类别1：具有点击按钮
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控制台说找不到我的状态。
我还尝试了：在我的第2类中和在Class1中
。

Answer 1

你在这里

Class1.js

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

Class2.js

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

将callApi方法传递给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
            )    
       }   
   }

Answer 2

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

使用道具

“渲染道具”是指一种在React组件之间共享代码的技术，它使用价值为函数的道具”-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中，我们导入了组件{{1}}，并使用<Button/>将方法从props“ app.js”传递到我们创建的名为{{ 1}}。在sayHello中，我们引用了whenClicked并将其传递给button.js属性。

this.props.whenClicked现在在两个组件之间共享，因为我们将方法作为道具传递给了onClick组件。

Answer 3

首先：考虑使用Stateless Functional Components代替有状态组件，例如“ Class1”这样不使用状态而只使用道具的情况。

现在，做您需要做的..只需将您的方法作为道具传递即可，

SignXmlNodes("E:\\nota.xml",
             "InfDeclaracaoPrestacaoServico",
             "InfDeclaracaoPrestacaoServico",
             SelectCertificate());

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

示例：

我尝试过的事情：

3 个答案: