如何将组件导入 UI？答案

【问题标题】：How to import a component to UI?如何将组件导入 UI？
【发布时间】：2020-03-02 09:06:44
【问题描述】：

抱歉，我是 React.js 的新手，刚从 Java 切换过来，我不明白如何在 UI 上显示我的地图。给个提示吧

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;

【问题讨论】：

TestMap组件中如何导入Map？
你是说谷歌地图吗？

标签： javascript reactjs react-component

【解决方案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，即它没有使用 google api 和道具进行装饰。

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);

【讨论】：

非常感谢！但是现在我看到“正在加载地图”，仅此而已......可能有人对此有经验并且知道可能会出现什么问题？
如果您不介意，您可以将您的一些代码加载到重现您的问题并使用链接更新您的问题的代码框中吗？或者更好的是，将此标记为已解决/已回答并打开一个新问题/问题。我会尝试一个沙盒，但我还没有准备好 googleAPI 密钥。
我已经尝试过了，但似乎我应该先研究它是如何工作的。否则我会花很多时间来完成它。所以这是 API 密钥“AIzaSyCON2tfJRtD7jUtVGm5Ks-jWF2HQnaWhqM”
@RobertGurjiev 更新了我的答案。您只需要导出由 google api 包装器装饰的组件即可。
@RobertGurjiev 如果对您有帮助，请接受答案。

【解决方案2】：

您需要将组件作为 JSX 标记返回，Introducing JSX。

另外，如果您是新手，建议您从这里开始，Getting Started。

import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';

class Map extends Component {
    render() {
        return (
          <TestMap />
        );
    }
}

【讨论】：

【解决方案3】：

在返回块内指定组件。在您的情况下，<TestMap /> 在 Map 组件的返回内。

【讨论】：

【解决方案4】：

首先，我无法理解您为什么要在 Map 组件上再添加一个抽象的组件。您可以直接使用您在第一个代码sn -p中使用过的TestMap组件。无论如何，您可以直接从地图组件返回。

import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';

class Map extends Component {
    render() {
        return (
          <TestMap />
        );
    }
}

export default Map;

【讨论】：

【解决方案5】：

子组件

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 default TestMap;

父组件

import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';

class Map extends Component {
    render() {
        return (
          <TestMap />
        );
    }
}

export default Map;

【讨论】：