我基本上是在重构我的React组件以支持新的无状态功能组件React功能组件.但是,我对if-else
功能组件中的语法感到困惑.
旧代码(工作正常):它的作用主要是查找用户当前是否已登录.如果是,则重定向到主页,否则重定向到登录页面.CurrentUser组件返回一个prop currentUser
并检查当前状态
import React, {Component} from "react"; import currentUser from "shared/components/CurrentUser"; import Home from "../Home"; import Landing from "../Landing"; class DefaultRouteHandler extends Component { render() { if (!this.props.currentUser) { return (); } else { return ( ); } } } export default currentUser(DefaultRouteHandler);
新代码:现在,else
如果currentUser的状态为false ,我应该如何检查条件.正如您现在所看到的,它将始终返回主页.
import React from "react"; import currentUser from "shared/components/CurrentUser"; import Home from "../Home"; import Landing from "../Landing"; const DefaultRouteHandler = ({currentUser}) => (); export default DefaultRouteHandler;
最后在我的route.jsx中我调用了前面提到的组件
如果您需要更多信息,请与我们联系.我也可以粘贴我的CurrentUser
组件代码.但是,我认为这个问题没有任何意义.
const DefaultRouteHandler = ({currentUser}) => { if (currentUser) { return; } return ; };
我终于找到了问题所在。我必须在新代码中进行2处更改:
1)将三元运算符用于if-else
2)忘记通过currentUser
导出默认值中的包装器来访问实际的道具值
以下代码有效:
import React from "react"; import currentUser from "shared/components/CurrentUser"; import Home from "../Home"; import Landing from "../Landing"; const DefaultRouteHandler = ({currentUser}) => ( !currentUser ?: ); export default currentUser(DefaultRouteHandler);
感谢@Road提醒我,我没有从currentUser
组件传递道具。