抱歉,我是 React.js 的新手,刚刚从 Java 切换过来,我不明白如何在 UI 上显示我的 map 。给我一个提示
import React from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
GoogleApiWrapper({
apiKey: ({api-key})
})(TestMap);
export {TestMap, GoogleApiWrapper};
这里:
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
//???
);
}
}
export default Map;
最佳答案
这是一个 React 组件,将其渲染为 JSX
import React, { Component } from 'react';
import { TestMap } from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
顺便说一句,不要将您的类组件命名为 Map
,因为已经有一个 Javascript Map
对象,这可能会导致一些重大困惑和错误。
编辑
当您导出未修饰的 TestMap
时,您的 map 将永远加载,即它没有使用 google api 和 props 进行修饰。
import React, { Component } from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
// default export the decorated component so the api-key and google prop is processed and injected.
export default GoogleApiWrapper({
apiKey: 'sLiGhTlyReDacTedApIkEy'
})(TestMap);
关于javascript - 如何将组件导入到UI中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60485506/