[英]If-else in React Stateless functional components
我基本上是在重構我的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 (<Landing />);
} else {
return (<Home />);
}
}
}
export default currentUser(DefaultRouteHandler);
新代碼:現在,如果currentUser的狀態為false,我應該如何檢查else
條件。 正如您現在所看到的,它將始終返回主頁。
import React from "react";
import currentUser from "shared/components/CurrentUser";
import Home from "../Home";
import Landing from "../Landing";
const DefaultRouteHandler = ({currentUser}) => (
<Home />
);
export default DefaultRouteHandler;
最后在我的route.jsx中我調用了前面提到的組件
<IndexRoute component={DefaultRouteHandler} />
如果您需要更多信息,請與我們聯系。 我也可以粘貼我的CurrentUser
組件代碼。 但是,我認為這個問題沒有任何意義。
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
我終於弄明白了這個問題。 我必須在我的新代碼中進行2次更改:
1)對if-else使用三元運算符
2)忘記在導出默認值中傳遞currentUser
包裝器以訪問實際的prop值
以下代碼有效:
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);
感謝@Road提醒我,我沒有從currentUser
組件傳遞prop。
這稱為條件渲染
1)使用簡單的if-else。
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
2)使用JavaScript三元運算符
const DefaultRouteHandler = ({currentUser}) => (
currentUser ? <Home /> : <Landing />
);
在無狀態組件中使用條件來顯示多個導入的組件。 在您的水療中心顯示條件明智的標題在App.js文件中
var path= window.location.pathname; // lets imaging that url is "/home/x" var pathArray = path.split( '/' ); var loc= pathArray[1];//number of part of url that is changing, here it rerurns x injectTapEventPlugin(); export default ({ children }) => ( <MuiThemeProvider muiTheme={muiTheme}> <div className="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> {loc!=="signin" && path!=="/"?(<DashboardHeader/>):null} {loc!=="signin" && path!=="/"?(<SideBar/>):null} {children} </div> </MuiThemeProvider> );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.