How to import component correctly in React.js?

Question

I have this project structure

Sorry for question, I am new in React, I can't uderstand how I should call this code in 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;

in my Map.js page?

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

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

export default Map;

PS This is index.js file and I have no idea why I need it.

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

In your component .js, make sure you have

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

And then

import OLMap from "./OLMap";

And of course check your folder structure

Answer 2

import OLMap from "../map/ol-test3/ol-map"

名称在默认导出中无关紧要，因此您可以在导入时命名任何您想要的名称。