Javascript ./src/App.js 83:48-54“；出口'；默认值'；在'；中找不到（作为'；注册导入）/Signup.js'；

我不明白，请帮忙。我是新手

这是我的密码

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

import React，{Component}来自'React'；
导入“/App.css”；
从“./Signup.js”导入注册；
从“./Login.js”导入登录名；
类应用程序扩展组件{
getInitialState（）{
返回{signup:false，login:true}
}
开关（字）{
var注册、登录；
if（word==“signup”）{signup=true；login=false；}
else{login=true；signup=false；}
返回此.setState（{login:login，signup:signup}）
}
render（）{//这是render方法
var self=这个；
返回(
登录
login
{self.state.signup？：null}
{self.state.login？：null}
)
}
}
导出默认应用程序；//我认为问题就在这里，但还没有被理解

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

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

import React，{Component}来自'React'；
导入“/App.css”；
类登录扩展组件{
render（）{
返回(
发送
)
}
}

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

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

这是我的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>

            )
      }
}

import React，{Component}来自'React'；
导入“/App.css”；
类注册扩展了组件{
render（）{
返回(
发送
)
}
}

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

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

---

我不明白问题在哪里。

要使导入成为可能，您需要先导出类：

export default class Signup extends Component {

在Signup.js和login.js中：

export default class Login extends Component {

---

要使导入成为可能，您需要首先导出类：

export default class Signup extends Component {

在Signup.js和login.js中：

export default class Login extends Component {

---

您需要先导出类

例如

注册

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;

import React，{Component}来自'React'；
导入“/App.css”；
类注册扩展了组件{
render（）{
返回(
发送
)
}
}
导出默认注册；

现在，

Signup

类作为默认导出导出

在你的

App.js

中，你可以通过

import Signup from./Signup'导入它

您应该首先阅读更多关于ES6模块的信息

您需要先导出类

例如
注册

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;

import React，{Component}来自'React'；
导入“/App.css”；
类注册扩展了组件{
render（）{
返回(
发送
)
}
}
导出默认注册；

现在，
Signup
类作为默认导出导出

在你的
App.js
中，你可以通过
import Signup from./Signup'导入它

您应该首先阅读更多关于ES6模块的信息