React 条件渲染
在React中，我们可以创建多个组件来封装所需的行为。之后，我们可以根据某些条件或应用程序的状态来渲染它们。换句话说，根据一个或几个条件，组件决定它将返回哪些元素。在React中，条件渲染的工作方式与JavaScript中的条件工作方式相同。我们使用JavaScript运算符创建表示当前状态的元素，然后React Component更新UI以匹配它们。
从给定的场景中，我们可以了解条件渲染的工作原理。考虑一个处理登录/注销按钮的示例。登录和注销按钮将是单独的组件。如果用户登录，请呈现注销组件以显示注销按钮。如果用户未登录，请渲染登录组件以显示登录按钮。在React中，这种情况称为条件渲染。
React中有多种方法可以进行条件渲染。它们在下面给出。
if
三元运算符
逻辑&&运算符
切换案例运算符
带枚举的条件渲染
if
这是在render方法中在React中进行条件渲染的最简单方法。它仅限于组件的总块数。如果条件为 true ，它将返回要渲染的元素。在下面的示例中可以理解。
示例
function UserLoggin(props) {
return <h1>Welcome back!</h1>;
}
function GuestLoggin(props) {
return <h1>Please sign up.</h1>;
}
function SignUp(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserLogin />;
}
return <GuestLogin />;
}
ReactDOM.render(
<SignUp isLoggedIn={false} />,
document.getElementById('root')
);
逻辑&&运算符
此运算符用于检查条件。如果条件为 true ，它将在 && 之后返回元素 right ，如果条件为 false ，则执行React将忽略并跳过它。
语法
{
condition &&
// whatever written after && will be a part of output.
}
从下面的示例中我们可以理解此概念的行为。
如果运行以下代码，则不会看到 alert 消息，因为条件不是匹配。
('lidihuo' == 'lidihuo') && alert('this alert will never be shown!')
如果运行以下代码，由于条件匹配，您将看到警报消息。
(10 > 5) && alert('this alert will be shown!')
示例
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example()
{
return(<div>
{
(10 > 5) && alert('this alert will be shown!')
}
</div>
);
}
您可以在上面的输出中看到，当条件(10> 5)计算为true时，警报消息将成功显示在屏幕上。
三元运算符
在给定条件下两个块交替出现的情况下，使用三元运算符。该运算符使您的if-else语句更加简洁。它需要三个操作数，并用作if语句的快捷方式。
语法
如果条件为 true ，则将呈现 statement1 。否则，将呈现 false 。
示例
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
Welcome {isLoggedIn ? 'Back' : 'Please login first'}.
</div>
);
}
切换案例运算符
有时可能有多个条件渲染。在切换情况下，将基于不同的状态应用条件渲染。
示例
function NotificationMsg({ text}) {
switch(text) {
case 'Hi All':
return <Message: text={text} />;
case 'Hello lidihuo':
return <Message text={text} />;
default:
return null;
}
}
使用枚举进行条件渲染
枚举是进行多条件渲染的一种好方法。与转换案例操作员相比，它更可读。非常适合在状态之间进行映射。它也非常适合在多个条件下进行映射。在下面的示例中可以理解。
示例
function NotificationMsg({ text, state }) {
return (
<div>
{{
info: <Message text={text} />,
warning: <Message text={text} />,
}[state]}
</div>
);
}
条件渲染示例
在下面的示例中，我们创建了一个名为 App 的有状态组件，用于维护登录名控制。在这里，我们创建三个组件，分别代表注销，登录和消息组件。有状态组件App将呈现 <loginbutton /> 或 <logoutbutton /> 取决于其当前状态。
import React, { Component } from 'react';
// Message Component
function Message(props)
{
if (props.isLoggedIn)
return <h1>Welcome Back!!!</h1>;
else
return <h1>Please Login First!!!</h1>;
}
// Login Component
function Login(props)
{
return(
<button onClick = {props.clickInfo}> Login </button>
);
}
// Logout Component
function Logout(props)
{
return(
<button onClick = {props.clickInfo}> Logout </button>
);
}
class App extends Component{
constructor(props)
{
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.state = {isLoggedIn : false};
}
handleLogin()
{
this.setState({isLoggedIn : true});
}
handleLogout()
{
this.setState({isLoggedIn : false});
}
render(){
return(
<div>
<h1> Conditional Rendering Example </h1>
<Message isLoggedIn = {this.state.isLoggedIn}/>
{
(this.state.isLoggedIn)?(
<Logout clickInfo = {this.handleLogout} />
) : (
<Login clickInfo = {this.handleLogin} />
)
}
</div>
);
}
}
export default App;
输出:
执行上述代码时，将显示以下屏幕。
单击注销按钮后，将显示以下屏幕。
防止组件表单渲染
有时，即使另一个组件渲染了组件，该组件也会隐藏自身。为此(防止组件渲染)，我们将必须返回 null 而不是其渲染输出。在以下示例中可以理解:
示例
在此示例中，
是根据称为 displayMessage 的Props的值呈现的。如果prop值为false，则组件不会渲染。
import React from 'react';
import ReactDOM from 'react-dom';
function Show(props)
{
if(!props.displayMessage)
return null;
else
return <h3>Component is rendered</h3>;
}
ReactDOM.render(
<div>
<h1>Message</h1>
<Show displayMessage = {true} />
</div>,
document.getElementById('app')
);
输出:
