javascript - 如何在React.js中正确导入组件？

Question

我有这个项目结构

抱歉，我是 React 新手，我不明白如何在 ol-map.js 中调用此代码

import React from "react";

import {
  Map,
  layer,
  Layers
} from "react-openlayers";

class olMap extends React.Component {
  render() {
    return (
      <div className="Map">
        <Map view={{ center: [0, 0], zoom: 2 }}>
          <Layers>
            <layer.Tile />
          </Layers>
        </Map>
      </div>
    );
  }
}

export default olMap;

在我的 Map.js 页面中？

import React, {Component} from 'react';
import olMap from '../components/map/ol-test3/ol-map';

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

export default Map;

附注这是 index.js 文件，我不知道为什么需要它。

import React from "react";
import ReactDOM from "react-dom";
import olMap from "./ol-map";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <olMap />
  </React.StrictMode>,
  rootElement
);

Answer 1

在你的组件 .js 中，确保你有

import React, { Component } from "react";
class OLMap extends Component {

然后

import OLMap from "./OLMap";

当然还要检查你的文件夹结构