Question

我正在尝试加载一个config.json文件，该文件包含应在整个应用程序中用作常量的属性。

我有config.jsx如下：

import React from 'react';
import $ from 'jquery';

var config = {
  init(){
    var deferred = $.Deferred();
    let obj = this;
    $.get("/app/config/config.json").then(function(response) {
        obj.ApiBaseUrl = response.ApiBaseUrl;
        deferred.resolve();
      }, function(errorResponse) {
        deferred.reject();
      });
    return deferred.promise();
  },
  ApiBaseUrl: null
}

export default config;

然后我在加载应用程序之前加载数据并设置配置，如app.jsx中所示：

import React from 'react';
import Router from 'react-router';
import routes from './routes';
import Config from './config';

Config.init().then(function(resp){
  Router.run(routes, Router.HistoryLocation, Handler => React.render(<Handler />, document.body));  
}, function (err){

});

因此，在Config.init()之后，我们可以访问Config.ApiBaseUrl处的已加载数据。如果我们在另一个文件中导入配置，我们会丢失此数据，例如home.jsx：

import React from 'react';
import Config from '../config';

Config.ApiBaseUrl; // This is null.
class Home extends React.Component {
  render() {    
    return (
      <div>
      </div>
    );
  }
}

export default Home;

如何将我的配置类编写成一个单例，一旦调用Config.init()并设置了类属性，我可以从导入该类的任何地方访问这些属性？

异步加载reactjs

0 个答案: