尝试在您的组件中默认导出：

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

通过使用默认值，您表示将成为该module中的成员，如果未提供特定成员名称，则将导入该module。你也可以通过这样做来表达你想要导入名为 MyNavbar 的特定成员： import {MyNavbar} from './comp/my-navbar.jsx'; 在这种情况下，不需要默认值

如果没有默认导出，则用大括号包裹组件：

import {MyNavbar} from './comp/my-navbar.jsx';

或从单个module文件导入多个组件

import {MyNavbar1, MyNavbar2} from './module';

要在 ES6 中导出单个组件，可以使用export default如下：

class MyClass extends Component {
 ...
}

export default MyClass;

现在您使用以下语法导入该module：

import MyClass from './MyClass.react'

如果您希望从单个文件中导出多个组件，则声明将如下所示：

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

现在您可以使用以下语法导入这些文件：

import {MyClass1, MyClass2} from './MyClass.react'

对于导入和导出module的所有新方法，MDN 有非常好的文档是 ES 6 Import-MDN。关于您的问题的简要说明，您可以：

1. 将您要导出的组件声明为该module正在导出的“默认”组件： export default class MyNavbar extends React.Component {，因此在导入您的“MyNavbar”时，您不必在其周围放置花括号 : import MyNavbar from './comp/my-navbar.jsx';。虽然没有在导入周围放置花括号是告诉文档该组件已声明为“导出默认值”。如果不是，你会得到一个错误（就像你所做的那样）。

2. 如果您不想在导出时将“MyNavbar”声明为默认导出 : export class MyNavbar extends React.Component {，那么您必须将“MyNavbar”的导入用花括号括起来： import {MyNavbar} from './comp/my-navbar.jsx';

我认为由于您的“./comp/my-navbar.jsx”文件中只有一个组件，因此将其设为默认导出很酷。如果您有更多组件，如 MyNavbar1、MyNavbar2、MyNavbar3，那么我不会将其中任何一个或它们设为默认值，并在module未声明任何一个您可以使用的默认值时导入module的选定组件：import {foo, bar} from "my-module";where foo和 bar 是module的多个成员。

一定要阅读 MDN 文档，它有很好的语法示例。希望这有助于为任何希望在 React 中使用 ES 6 和组件导入/导出的人提供更多的解释。

我希望这是有帮助的

第一步：App.js是（主module）导入登录module

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

第 2 步：创建登录文件夹并创建 login.js 文件并自定义您的需求，它会自动呈现到 App.js 示例 Login.js

import React, { Component } from 'react';
import '../login/login.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;