时间戳

首页 > 解决方案 > 从反应原生组件调用javascript函数

javascript - 从反应原生组件调用javascript函数

问题描述

实际上我是新手，我正在调用单例类中的 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"
    }
  }

标签： javascriptreactjsreact-native

解决方案

JavaScript 中单例模式的实现方式是利用导出

像这样：

// 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'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读