Question

我在login.js中有一个react组件，我保存在一个单独的文件中，然后在我的主文件App.js中导入login.js.我在导入时遇到问题，因为本地主页我将应用程序呈现为完全空白，没有给出错误。不确定我做错了什么，我的组件的代码，login.js如下：

import React, {Component} from 'react';
import * as firebase from 'firebase';


class login extends Component{

constructor(props) {
    super(props)
    this.state = {emailText: '',
                  passwordText: ''
                 }
}


onChangeEmail(e) {
    this.setState({emailText: e.target.value})
}

onChangePassword(e) {
    this.setState({passwordText: e.target.value})
}

signUpUser(){
    console.log(this.state.emailText)
    console.log(this.state.passwordText)

    firebase.auth().createUserWithEmailAndPassword(this.state.emailText, this.state.passwordText)
    console.log('New account created, and is now signed in.')
}

loginUser(){
    console.log('logging in rn')
    firebase.auth().signInWithEmailAndPassword(this.state.emailText, this.state.passwordText)
    console.log('Successfully logged in')
}

logoutUser(){
    firebase.auth().signOut()
    console.log('logged out')
}

    render(){
        return  (
            <div class="container">
            <input onChange={this.onChangeEmail.bind(this)} id="txtEmail" type="email" placeholder="Email"/>

            <input onChange={this.onChangePassword.bind(this)} id="txtPassword" type="password" placeholder="Password"></input>       

            <button onClick={this.loginUser.bind(this)} id="btnLogin" class="btn btn-action">
            Log in </button>    

            <button onClick={this.signUpUser.bind(this)} id="btnSignUp" class="btn btn-secondary">
            Sign Up </button>

            <button onClick={this.logoutUser.bind(this)} id="btnLogout" class="btn btn-action hide">Log Out</button>
        </div>  
        )

    }

};

export default login;

我导入login.js的代码如下：

import React, {Component} from 'react';
import * as firebase from 'firebase'; // Import Firebase library
import login from './login.js';

export default class App extends React.Component {
   render() {
      return (
         <div>
            <login/>
         </div>
      );
   }
}

我的index.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

您需要更改login组件的名称。它必须是Login而不是login。

以下是名为Login并且一切正常的情况：

https://codesandbox.io/s/EkEJ02zY

尝试将其从Login更改为login，您将获得空白屏幕。

希望这有帮助。

使用ES6导入React组件

1 个答案: