Javascript If-else在React无状态功能组件中
我基本上是重构我的React组件,以支持新的无状态功能组件。然而,我对函数组件中的Javascript If-else在React无状态功能组件中,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我基本上是重构我的React组件,以支持新的无状态功能组件。然而,我对函数组件中的if-else语法感到困惑 旧代码(工作正常):它基本上是查找用户当前是否登录。如果是,则重定向到主页,否则重定向到登录页。CurrentUser组件返回一个propCurrentUser,并检查当前状态 import React, {Component} from "react"; import currentUser from "shared/components/CurrentUser"; import Ho
if-else
语法感到困惑
旧代码(工作正常):它基本上是查找用户当前是否登录。如果是,则重定向到主页,否则重定向到登录页。CurrentUser组件返回一个propCurrentUser
,并检查当前状态
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 (<Landing />);
} else {
return (<Home />);
}
}
}
export default currentUser(DefaultRouteHandler);
最后,在我的route.jsx中,我调用前面提到的组件
<IndexRoute component={DefaultRouteHandler} />
如果你需要更多信息,请告诉我。我还可以粘贴我的CurrentUser
组件代码。然而,我认为它对这个问题没有任何作用。constdefaultroutehandler=({currentUser})=>{
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
如果(当前用户){
返回;
}
返回;
};
我终于解决了这个问题。我必须对我的新代码进行两项更改:
1) 对if-else使用三元运算符
2) 忘记在导出默认值中传递currentUser
wrapper以访问实际的属性值
以下代码工作:
import React from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";
const DefaultRouteHandler = ({currentUser}) => (
!currentUser ? <Landing /> : <Home />
);
export default currentUser(DefaultRouteHandler);
从“React”导入React;
从“共享/组件/当前用户”导入currentUser;
从“./主页”导入主页;
从“./着陆”导入着陆;
常量DefaultRouteHandler=({currentUser})=>(
!当前用户?:
);
导出默认currentUser(DefaultRouteHandler);
感谢@Road提醒我,我没有从
currentUser
组件传递道具。使用无状态组件中的条件来显示多个导入的组件。
在您的spa中显示状态信息标题
在App.js文件中
var path=window.location.pathname;//允许将url设置为“/home/x”
var pathArray=path.split('/');
var loc=路径数组[1]//正在更改的url部分的编号,在此它将重新返回x
injectTapEventPlugin();
导出默认值({children})=>(
{loc!=“signin”&&path!=“/”?():null}
{loc!=“signin”&&path!=“/”?():null}
{儿童}
); 代码>这被称为
1) 如果没有,请使用simple
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
constDefaultRouteHandler=({currentUser})=>{
如果(当前用户){
返回;
}
返回;
};
2) 使用JavaScript三元运算符
const DefaultRouteHandler = ({currentUser}) => (
currentUser ? <Home /> : <Landing />
);
constDefaultRouteHandler=({currentUser})=>(
当前用户?:
);
您是否尝试过这样做!当前用户?:代码>?使用BabelI传输jsx时,这不是有效的语法。我用babeljs.io online repl尝试了一下,似乎可以正常工作。它传输到此代码var DefaultRouteHandler=函数DefaultRouteHandler(_ref){var currentUser=_ref.currentUser;return!currentUser?React.createElement(Landing,null):React.createElement(Home,null);}代码>,我使用了这个常量DefaultRouteHandler=({currentUser})=>(!currentUser?:)代码>是的,很抱歉我没有正确反应代码。它确实有效,但不起作用,并且总是返回
我认为问题在于,您没有将currentUser
道具传递给无状态函数。在旧代码中,您可以访问this.props
,但在无状态函数中,您只能访问您输入的内容。这实际上是最好的答案,因为它是最灵活的
const DefaultRouteHandler = ({currentUser}) => (
currentUser ? <Home /> : <Landing />
);