如何从命名功能组件中调用父类组件功能

时间:2020-05-30 16:32:14

标签: reactjs

// parent.js

import React, { Component } from "react";
import function1, { function2 } from "./functionalComponent";

class ParentClass extends Component {
state = {  loading: true  };

doAction = () => { this.setState({ loading : !this.state.loading })

render() {
    return (<function1 props={this.state} doAction={this.doAction}/>);
}

// child.js

import React, { Component, Fragment } from "react";

const function1 = data => {
return(
        <div>
          <button onClick={() => data.doAction()}>
            Click
          </button>

          <button onClick={() => function2()}>
            Click
          </button>
        </div>
      );
}

const function2 = data => {
 axios
   .patch(`${getInStorage("baseUrl")}/api/v2/job_applications/${id}/shortlistt`)
   .then(() => {
                 data.doAction();         //throws error
               })
}

export { function2 };
export default function1;

从fuction1组件中,我可以访问父类函数,但是从function2组件中,我如何访问同一函数

由于function2仍未返回任何内容,因此我导入了该组件并尝试了此代码,但无法调用该方法。

render() {
    return (<function1 props={this.state} doAction={this.doAction}>
               <function2 doAction={this.doAction}/>
            </function1>);
}

任何调用该方法的解决方案。

0 个答案:

没有答案