在类和功能组件之间传递数据 - React JS答案

【问题标题】：Passing data between a class and a functional component - React JS在类和功能组件之间传递数据 - React JS
【发布时间】：2021-10-14 07:27:40
【问题描述】：

我正在使用 React 和 React 路由器。

这是我的第一个组件：

import React from 'react';

class SomeClass extends React.Component{
    constructor(props){
        super(props);
        this.state = {
              someObj: {
                something: "",
                someOtherThing: ""
              },
            authenticated: false
        };
    }

}



export default SomeClass;

这是我的 ProtectedRoute 组件： const ProtectedRoute = ({auth, component: Component, ...rest}) =>{ 返回（ {

            if(auth){
                return(<Component {...props} />);
            }

            if(!auth){
                return(<Redirect to={{path: "/", state:{from: props.location}}} />);
            }
        }} />
    );
};

export default ProtectedRoute;

这是我的导航组件：

import React from 'react';
import { BrowserRouter as Router, Switch} from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import SomeClass from './SomeClass';

function Nav(){
    return(
        <Router>
            <Switch>
                <ProtectedRoute exact path="/somepage/abc" component={SomeClass} auth={SomeClass.props.authenticated} />  //getting an error here because of SomeClass.props.authenticated
            </Switch>
        </Router>

    );
}


export default Nav;

我的问题：

在我的Nav功能组件中，有，我想从SomeClass的认证值（this.state.authenticated）中获取认证值？

当我执行 SomeClass.props.authenticated 时，我收到以下错误：

TypeError: 无法读取未定义的“已验证”属性

【问题讨论】：

您能补充一下您遇到的错误吗？

标签： javascript reactjs react-redux react-router react-hooks

【解决方案1】：

你可以以道具的形式传递下去

在someClass：

导入导航
输入以下内容

<Nav auth = {this.state.authenticated}/>

Nav 组件应该如下：

function Nav(props){
    return(
        <Router>
            <Switch>
                <ProtectedRoute exact path="/somepage/abc" component={SomeClass} auth={props.auth} /> 
            </Switch>
        </Router>

    );
}

【讨论】：