javascript - react 谷歌地图节点模块 map 样式加载空对象，而不是json

Question

我正在尝试让react-google-maps节点模块加载 map 样式json文件。控制台日志显示它正在查找 json 文件并加载它，但我从 require() 获得的值是一个空对象，仅加载了 getter 和 setter 函数。

像这样:

    var mapStyle = require('./darkMapStyle.json');
    // compiles down using webpack
    var mapStyle = __webpack_require__(428);

    mapStyle = {
    __defineGetter__: __defineGetter__()
    __defineSetter__: __defineSetter__()
    __lookupGetter__: __lookupGetter__()
    __lookupSetter__: __lookupSetter__()
    constructor: Object()
    hasOwnProperty: hasOwnProperty()
    isPrototypeOf: isPrototypeOf()
    propertyIsEnumerable: propertyIsEnumerable()
    toLocaleString: toLocaleString()
    toString: toString()
    valueOf: valueOf()
    get __proto__: get __proto__()
    set __proto__: set __proto__()
    }

    // load my google map in the render()
    <GoogleMapLoader    
        loadingElement={<div>loading</div>}
        containerElement={
            <div {...this.props} style={{height: "100%",}}/>
        }
        googleMapElement={
           <GoogleMap
               defaultZoom={results.mapZoom}
               defaultCenter={{lat: 37.400343, lng: -122.110043}}
               defaultOptions={{styles: mapStyle}}
               onClick={this.handleMapClick}>         
           </GoogleMap>
         }
     />

使用 require 导入的所有其他模块都按预期运行，但 mapStyle 未提供 json 文件中的 json 数据。

我按照这个例子来做到这一点: http://tomchentw.github.io/react-google-maps/#/basics/styled-map?_k=nd5q0e

感谢任何帮助

Answer 1

如果有人遇到类似的情况，我已经找到了解决此问题的有效解决方案。

我在一个单独的文件中创建了一个函数，该函数保存 json，它只是作为对象(而不是 json 字符串)返回。

我将返回的 json 分配给我的 render() 中的变量

var mapStyle = getData.getDarkMapStyle();

然后我将此变量分配给我的 googlemap 标记，如下所示:

<GoogleMap
     defaultOptions={{styles: mapStyle}}>
</GoogleMap>

只是不通过 require() 检索 json 对象，但函数调用解决了这个问题。