从外部目录导入React组件

Question

import React from 'react';
//import logo from './logo.svg';
import './App.css';
import '../public/components/NavBar';


class App extends React.Component {
  render() {
    return (
       <NavBar />
      );
  };
};

export default App;

很简单。 为什么会出现以下编译错误？

Failed to compile.

Error in ./src/App.js

C:\Users\martin\Documents\Web Projects\ReactApp\app\src\App.js
  10:9  error  'NavBar' is not defined  react/jsx-no-undef

✖ 1 problem (1 error, 0 warnings)

的NavBar

import React, {Component} from 'react';

class NavBar extends Component {
  handleClick () {
    alert('Hello world!');
  }

  render () {
    return (
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="{this.handleClick}">
                Yeet Club
              </a>
            </div>
          </div>
        </nav>
    );
  }
}

export default NavBar;

Answer 1

JavaScript导入需要from和一个名称：

import NavBar from '../public/components/NavBar';