javascript React 无状态功能组件中的 If-else
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34045348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If-else in React Stateless functional components
提问by zaq
I am basically refactoring my React component to support new stateless functional component React functional component. However, I'm confused about the if-elsesyntax in functional component.
我基本上是在重构我的 React 组件以支持新的无状态功能组件React 功能组件。但是，我对if-else功能组件中的语法感到困惑。
Old code (Working fine): What it does basically is to find if the user is currently logged in. If yes, redirect to Home page else to Landing page. CurrentUser component returns a prop currentUserand checks the current state
旧代码（工作正常）：它所做的基本上是查找用户当前是否已登录。如果是，则重定向到主页，否则重定向到登陆页面。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);
New code: Now, how should I check the elsecondition in case the state of currentUser is false. As you can see right now it will always return the Home page.
新代码：现在，else如果 currentUser 的状态为 false ，我应该如何检查条件。正如您现在所看到的，它将始终返回主页。
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;
Finally in my route.jsx I am calling the aforementioned component
最后在我的 route.jsx 中，我调用了上述组件
<IndexRoute component={DefaultRouteHandler} />
Let me know if you need more information. I can also paste my CurrentUsercomponent code. However, I don't think it will serve any purpose for this question.
如果您需要更多信息，请与我们联系。我也可以粘贴我的CurrentUser组件代码。但是，我认为它不会为这个问题服务。
采纳答案by zaq
I finally figured out the problem. I have to make 2 changes in my new code:
我终于想通了问题所在。我必须在我的新代码中进行 2 处更改：
1) Use ternary operator for if-else
1) 对 if-else 使用三元运算符
2) Forgot to pass currentUserwrapper in export default in order to access the actual prop value
2）忘记currentUser在导出默认值中传递包装器以访问实际的道具值
Following code works:
以下代码有效：
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);
thanks @Road for reminding me that I am not passing the prop from currentUsercomponent.
感谢@Road 提醒我我没有从currentUser组件传递道具。
回答by jurassix
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
回答by Hassan Ajaz
This is called Conditional-Rendering
这称为条件渲染
1) Use simple if-else.
1) 使用简单的 if-else。
const DefaultRouteHandler = ({currentUser}) => {
if (currentUser) {
return <Home />;
}
return <Landing />;
};
2) Use JavaScript Ternary Operator
2) 使用 JavaScript 三元运算符
const DefaultRouteHandler = ({currentUser}) => (
currentUser ? <Home /> : <Landing />
);
回答by Pankaj
use condition in stateless component for showing more than one imported component. Show condition wise header in your spa In App.js file
在无状态组件中使用条件来显示多个导入的组件。在您的 Spa In 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>
); 