Question

实际上，我是本机反应的新手，我正在调用singleton类中的javascript函数。我想从构造函数的另一个反应本机组件中调用此函数。但是，如果我尝试调用它，则不是在调用该函数。

代码：

export default class CustomScreen extends React.Component {
   constructor(){
    LoginUtil.getInstance().getLoginToken() // ==> not working
   }
}
 export default class LoginUtil {

    static instance = null;
    static createInstance() {
        var object = new LoginUtil();
        return object;
    }

    static getInstance () {
        if (!LoginUtil.instance) {
            LoginUtil.instance = LoginUtil.createInstance();
        }
        return LoginUtil.instance;
    }

     getLoginToken(){
        return "token"
    }
  }

Answer 1

在JavaScript中完成单例模式的方法是利用导出

赞：

no class shipping

诀窍是在导出实例时，它将处理单个实例，并避免编写用于实例化的样板代码。

然后在组件文件中执行以下操作：

// LoginUtils.js

class LoginUtil {
   
   constructor() {
    // Only called once
     this.token = 'initial';
   }


    setLoginToken(token) {
       this.token = token;
    }

     getLoginToken(){
        return this.token;
    }
  }

export default new LoginUtil();

编辑：

您可能无法使用的原因是，您需要在组件构造函数中添加import loginUtils from './LoginUtils'; export default class CustomScreen extends React.Component { constructor(){ const token = loginUtils.getLoginToken() } }作为第一条语句：

super()

class CustomScreen extends React.Component {
   constructor(){
    super();
    LoginUtil.getInstance().getLoginToken();

   }
   ...
  }

class CustomScreen extends React.Component {
   constructor(){
    super()
    this.state = { token: LoginUtil.getInstance().getLoginToken() };

   }
   
   render() {
    return <p>Token: {this.state.token}</p>
   }
}
class LoginUtil {

    static instance = null;
    static createInstance() {
        var object = new LoginUtil();
        return object;
    }

    static getInstance () {
        if (!LoginUtil.instance) {
            LoginUtil.instance = LoginUtil.createInstance();
        }
        return LoginUtil.instance;
    }

     getLoginToken(){
        return "token-test"
    }
  }
  
  ReactDOM.render(<CustomScreen />, document.getElementById('root'))

Answer 2

而不是从单例文件中导出类，而是将其对象导出为：

export default new LoginUtil()

然后导入该对象并调用该类的任何函数

从React Native组件调用javascript函数

2 个答案: