Javascript 将React功能组件转换为类组件问题

我有以下react功能组件来帮助支持react路由器所需的身份验证路由

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated() ? ( 
        <Component {...props}/>
    ) : (
        <Redirect to={{
            pathname: '/login', 
            state: {from: props.location }
        }}/>
    )
  )}/>
)

const PrivateRoute=（{component:component，…rest}）=>(
(
isAuthenticated（）？（
) : (
)
)}/>
)

---

我需要将其从功能组件转换为类组件，以便利用React.component的componentDidMount方法。不幸的是，我很难弄清楚如何迁移它。如果我照原样做，我需要复制组件和…rest参数，但我不知道怎么做。我想我可以用这个.props.Component获得组件参数，但我不确定如何拉…rest。我是JSX和ES6的新手，因此非常感谢任何帮助或指导

功能组件是

渲染

功能，因此：

class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

       return (
           <Route {...rest} render={props => (
               isAuthenticated() ? ( 
                 <Component {...props}/>
           ) : (
            <Redirect to={{
                pathname: '/login', 
                state: {from: props.location }
            }}/>
           )
         )}/>
       );
    }
}

类PrivateRoute扩展了React.Component{
render（）{
const{component:component，…rest}=this.props；
返回(
(
isAuthenticated（）？（
) : (
)
)}/>
);
}
}

或者，写得更可读一点：

class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

       const renderRoute = props => {
           if (isAuthenticated()) {
              return (
                  <Component {...props} />
              );
           }

           const to = {
               pathname: '/login', 
               state: {from: props.location}
           };

           return (
               <Redirect to={to} />
           );
       }

       return (
           <Route {...rest} render={renderRoute}/>
       );
    }
}

类PrivateRoute扩展了React.Component{
render（）{
const{component:component，…rest}=this.props；
const renderRoute=props=>{
如果（isAuthenticated（））{
返回(
);
}
常数至={
路径名：'/login'，
状态：{from:props.location}
};
返回(
);
}
返回(
);
}
}

通过扩展

路径

组件，实现了一个漂亮、干净的重构：

class PrivateRoute extends Route {

    render() {
        return isAuthenticated()
            ? super.render()
            : <Redirect to={{
                pathname: '/login',
                state: {from: props.location}
            }}/>;
    }
}

class PrivateRoute扩展了路由{
render（）{
返回已验证（）
？super.render（）
: ;
}
}

如果使用此选项，则必须将

s

包装在

中，如下所示。否则，您将有重复的重定向，页面将无法加载

<Router>
    <Navbar/>
    <SideDrawer/>
    <Switch>
        <Route              path="/tokens"   component={Login}/>
        <PrivateRoute exact path="/"         component={ExampleComponent}/>
        <PrivateRoute       path="/users"    component={Users}/>
        <PrivateRoute       path="/software" component={Software}/>
    </Switch>                   
</Router>

您能否使用此功能组件显示代码？谢谢。这很有帮助。我不明白的是

const{component:component，…rest}=This.props。这是做什么的，就像一个反向变量？@熊先生：这是