reactjs可重用组件抛出错误

我是UI开发新手，尝试将我的组件拆分到不同的文件中。 这是我需要在其他文件中使用的组件之一

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

import {AppBar} from 'material-ui/AppBar';


//injectTapEventPlugin();

class LoginPage extends Component {

  render() {
    return (
      <div>This is from the login page</div>
    );
  }
}
export default LoginPage;

import React，{Component}来自'React'；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react-tap事件插件”导入injectTapEventPlugin；
从“物料ui/AppBar”导入{AppBar}；
//injectTapEventPlugin（）；
类LoginPage扩展组件{
render（）{
返回(
这是从登录页面
);
}
}
导出默认登录页面；

这是我尝试使用上述组件的主页。 它在浏览器中显示以下错误

React.createElement:类型无效--应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 未定义。您可能忘记了从文件中导出组件 它的定义是

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react-tap事件插件”导入injectTapEventPlugin；
从“./LoginPage.js”导入登录页面
从“物料界面”导入{RaisedButton，Dialog，FlatButton}；
injectTapEventPlugin（）；
//var LoginPage=require（'./pages/LoginPage.js'）；
//类组件
类应用程序扩展组件{
render（）{
返回(
这是我的页面
);
}
}
导出默认应用程序；

我在SO上看到了类似的错误，但他们都说在导出组件时出现了一些问题，我看不到与正确导出LoginPage组件然后在App.js文件中导入相同的问题

---

有人能帮忙吗？

这是工作代码

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

import AppBar from 'material-ui/AppBar';

//injectTapEventPlugin();

class LoginPage extends Component {

  render() {
    return (
      <MuiThemeProvider>
      <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />     
      </MuiThemeProvider>
      );
  }
}
export default LoginPage;

import React，{Component}来自'React'；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react-tap事件插件”导入injectTapEventPlugin；
从“物料ui/AppBar”导入AppBar；
//injectTapEventPlugin（）；
类LoginPage扩展组件{
render（）{
返回(
);
}
}
导出默认登录页面；

应用程序页面

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import LoginPage from './LoginPage.js'

import {RaisedButton, Dialog, FlatButton} from 'material-ui';

injectTapEventPlugin();

//var LoginPage = require('./pages/LoginPage.js');

//class component
class App extends Component {

  render() {
    return (
      <div>
      <LoginPage />
      </div>
    );
  }
}
export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“react-tap事件插件”导入injectTapEventPlugin；
从“./LoginPage.js”导入登录页面
从“物料界面”导入{RaisedButton，Dialog，FlatButton}；
injectTapEventPlugin（）；
//var LoginPage=require（'./pages/LoginPage.js'）；
//类组件
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这行不正确

用括号导入表示请求的文件包含多个命名导出。这通常在从索引文件导入时使用。对于材质ui，这意味着：

import { AppBar } from 'material-ui';

您可以改为从“material ui/AppBar”文件导入，但该文件仅声明一个默认导出，因此您需要不带括号地导入，如下所示：

import AppBar from 'material-ui/AppBar';

---

使用调试器/console.log检查哪个（MuiThemeProvider，LoginPage）未定义，并尝试修复它。您的项目结构是什么？您的Login Paul.js同一个目录中包含了App组件吗？@ BeNyGeNel:是的，它在同一个目录中，如果我们认为您成功地安装了您使用的所有外部库，那么您的代码看起来就很好。你能添加完整的错误信息吗。可能有一些行或文件名可以帮助确定错误。我让它在不使用任何材质ui的简单情况下工作。但是当我将AppBar的代码粘贴到LoginPgae.js中时，它又给了我一个错误

import { AppBar } from 'material-ui';

import AppBar from 'material-ui/AppBar';