通过道具将数据从父类传递到子类，但道具在子类中不返回任何内容

Question

我正在使用 React JS。

我的父类 App.js，我的 Child 类是 SomeClass.js：

在我的 App.js 中，我有以下内容：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            authaccount: {
                email: "",
                password: ""
            },
            authenticated: false
        };
    }
      render(){
        return(
            <Router>
        
              <Switch>
                <Route path="/somelink/abc" exact component={SomeClass} authenticated={this.state.authenticated} />
              </Switch>
            </Router>
        );
    
    }



}


export default App;

我还有另一个 React 组件：

class SomeClass extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            item:[
                {
                    name: "",
                    material: "",
                },
            ],
        };
    }


    componentDidMount = () =>{
        if(this.props.authenticated === true && this.props.authaccount.email === "someemail@email.com") {
            this.someMethod();
        }else if(this.props.authenticated === true) {
            console.log(this.props.authaccount.email);   //getting undefined
            this.anotherMethod();
        }

    }

}
export default SomeClass;

App.js 是父类。 在我的 SomeClass 组件中，我想访问 App.js 状态中存在的“authaccount”的已验证属性和电子邮件属性

我的问题是如何将经过身份验证的值和电子邮件值从 App.js 传递给 SomeClass.js ？

我试图 console.log(this.props.authaccount.email); //但仍然未定义

Answer 1

你可以像这样传递道具：

 <Route path="/somelink/abc" exact component={() => (<SomeClass authenticated={this.state.authenticated} authaccount={this.state.authaccount} />)}  />