./src/App.js 83：48-54在'./Signup.js'中找不到'export'default'（導入爲'Signup'）

Question

我不理解請幫助。反應。

這裏是我的代碼。

App.js 

//////////////////////////////// /////////////////////////

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

class App extends Component { 

    getInitialState(){ 
    return {signup:false,login:true} 
    } 

    switch(word){ 
    var signup,login; 
    if(word == "signup"){signup = true;login = false;} 
    else{login = true; signup = false;} 
    return this.setState({login:login,signup:signup})  
    } 

    render(){ //this is render method 
    var self = this; 
     return (
     <div> 
      <div id="buttons"> 
      <p id="signupButton" onClick={self.switch.bind(null,"signup")} className={self.state.signup ? "yellow":"blue"}>Sign In</p> 
      <p id="loginButton" onClick={self.switch.bind(null,"login")} className={self.state.login ? "yellow":"blue"}> Login</p> 
      </div>    
      {self.state.signup? <Signup/> : null} 
      {self.state.login? <Login /> : null}    
     </div> 
      ) 
    } 
} 

export default App; // I think problem is here but not understood 

//////////////////////////////////////////////// ////////////////////////////

這裏是我的login.js頁面代碼 login.js

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

class Login extends Component { 
    render(){ 
      return (
       <div> 
        <div id="login"> 
         <input type="email" id="email" placeholder="Email"/> 
         <input type="password" id="password" placeholder="Password"/> 
         <button id="send">Send</button> 
        </div> 
        </div> 
      ) 
     } 
} 

//////////////////////////// /////////////////////////////////////////////////

這是我Signup.js頁面代碼 Signup.js

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

class Signup extends Component { 

    render(){ 
     return (
      <div> 
        <div id="signup"> 
         <input type="text" id="first" placeholder="First Name"/> 
         <input type="text" id="last" placeholder="Last Name"/> 
         <input type="email" id="email" placeholder="Email"/> 
        <input type="password" id="password" placeholder="Password"/> 
        <input type="password" id="confirm" placeholder="Confirm Password"/> 
        <button id="send">Send</button> 
      </div> 
       </div> 

      ) 
     } 
} 

//////////////////////////// /////////////////////////////////////////////////

問題在哪裏我不明白。

Answer 1

爲了能夠導入你需要首先導出類：

export default class Signup extends Component { 

在Signup.js

，並在login.js：

export default class Login extends Component { 

Answer 2

您需要首先導出類。

例如Signup

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

class Signup extends Component { 

    render(){ 
     return (
      <div> 
        <div id="signup"> 
         <input type="text" id="first" placeholder="First Name"/> 
         <input type="text" id="last" placeholder="Last Name"/> 
         <input type="email" id="email" placeholder="Email"/> 
        <input type="password" id="password" placeholder="Password"/> 
        <input type="password" id="confirm" placeholder="Confirm Password"/> 
        <button id="send">Send</button> 
      </div> 
       </div> 

      ) 
     } 
} 

export default Signup; 

現在Signup類導出爲默認的導出。

在你App.js，您可以通過import Signup from './Signup';

導入你應該先閱讀更多關於ES6模塊。

http://2ality.com/2014/09/es6-modules-final.html