javascript - 如何将组件导入到UI中？

Question

抱歉，我是 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;

Answer 1

这是一个 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);