如何导入组件到UI？

Question

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

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;

另外，不要将您的 class 组件命名为 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);

Answer 2

您需要return您的组件作为 JSX 标记，Introducing JSX。

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

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

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

Answer 3

在 return block.In 你的案例 <TestMap /> 中指定 return 地图组件中的组件。

Answer 4

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

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

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

export default Map;

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

如何导入组件到UI？

How to import a component to UI?

javascript

reactjs

react-component