reactjs可重用組件拋出錯誤

-1

我是UI開發新手，試圖將我的組件分割到不同的文件中。這是我需要在其他文件中使用的組件之一。reactjs可重用組件拋出錯誤

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;

這是我嘗試使用上述組件的主要頁面。它給我下面的錯誤在瀏覽器中

React.createElement：類型無效 - 預期字符串（內置成分）或類/功能（複合組件），但得到：未定義。你可能忘了您的組件從文件導出它

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 (
     <MuiThemeProvider> 
     <div> 
     This is my page 
     <LoginPage /> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 
export default App;

我看到這樣類似的錯誤已定義，但他們都表示，有出口構件的一些問題，我不能看到同樣的問題因爲我正確導出LoginPage組件，然後將其導入到App.js文件中。

有人可以幫忙嗎？

來源

2017-09-11 Amar Dev

使用您的調試器/ console.log來檢查哪一個（MuiThemeProvider，LoginPage）未定義，並嘗試修復它。 – lilezek

你的項目結構是什麼？您的LoginPage.js文件是否包含App組件，是否與您的LoginPage.js目錄相同？ – bennygenel

@bennygenel是的，它在同一個目錄 –

這裏是工作的代碼

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 } 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;

來源

2017-09-11 17:07:55

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

這行不正確。

使用括號導入意味着請求的文件包含多個命名導出。這通常用於從索引文件導入時使用。對於材料來說，這意味着這一點;

import { AppBar } from 'material-ui';

您可以改爲從「材料的UI/AppBar」文件導入，但是這個文件只聲明瞭一個默認的出口，所以你需要進口，沒有括號，就像這樣：

import AppBar from 'material-ui/AppBar';

來源

2017-09-11 17:10:02 gravityplanx

reactjs可重用組件拋出錯誤

回答

相關問題