无法呈现授权页面

Question

我正在尝试设置 firebase 身份验证。我有两个组成部分。第一个是带有 firebase.auth().currentUser 的应用程序，我正在检查是否有登录用户，然后如果有这样的用户，我会呈现页面，如果没有，我会呈现登录页面。第二个组件我只是从父级获取处理程序并尝试呈现登录页面。现在我只看到空白页和错误“'props' 未定义”。请帮我解决它。应用程序.jsimport React, {Component} from "react";import {    BrowserRouter as Router,    Switch,    Route,    Link} from "react-router-dom";import { Layout } from 'antd';import AddStock from './components/stocksDB/addStock';import { Typography, Menu } from 'antd';import 'antd/dist/antd.css';import './App.css';import AddClient from './components/clients/addClient.js';import PifForm from './components/clients/pif/pifForm';import KuaForm from './components/clients/pif/kuaForm';import firebase from './firebase.js';import {Login} from './components/login.js'const { Title } = Typography;const {Header, Footer, Content} = Layout;class App extends Component {    constructor(props){        super(props);        this.state = {            login: '',            password: ''        }    }    handleChange = (event) => {        const target = event.target;        const name = target.name;        this.setState({            [name]: target.value        }, () => {console.log(name, this.state)})    };    signUp = () => {        firebase.auth().createUserWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {            console.log(error);        })    };    signIn = () => {        firebase.auth().signInWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {            console.log(error);        })    };    onFinishFailed = errorInfo => {        console.log('Failed:', errorInfo);    };

Answer 1

由于Login是功能组件，您需要像这样传入并定义道具：const Login = (props) => {. props.handleChange然后，您可以使用和访问道具props.signUp。

无需在功能组件内部未定义的this基于类的组件中使用 like 。this

Answer 2

你正在调用 props 但你还没有在你的功能组件中定义它。

export const Login = (props) => {
...

}