反应JS |条件渲染
我们已经讨论了如何创建组件、如何渲染组件、使用 proptypes、使用状态来存储信息等等。在我们之前的文章中，我们还使用 ReactJS 开发了一个基本的计算器应用程序。
当我们想根据某些条件渲染某些东西时，可能会出现这种情况。例如，考虑处理登录/注销按钮的情况。这两个按钮具有不同的功能，因此它们将是单独的组件。现在，任务是如果用户已登录，那么我们将不得不渲染 Logout 组件以显示注销按钮，如果用户未登录，那么我们将不得不渲染 Login 组件以显示登录按钮。这就是我们在 ReactJS 中所说的条件渲染。即创建多个组件，并根据某些条件进行渲染。这也是 React 支持的一种封装。
现在让我们在 React 中创建一个包含消息和按钮的页面。如果用户未登录，该按钮将显示“登录”，如果用户已登录，则显示“注销”。我们还将为该按钮添加一些功能，因为单击“登录”时，消息将显示“欢迎用户”和按钮将变为“注销”，单击“注销”后，消息将变为“请登录”，按钮将变为“登录”。
为此，我们将创建一个名为“Homepage”的父组件，两个名为“Login”和“Logout”的组件以及一个名为“Message”的组件。我们将使用一个名为“isLoggedIn”的状态变量来存储有关用户是否登录的信息。这个变量的值会随着用户对按钮的点击而改变。 Homepage组件将呈现Message组件以显示消息，它还将根据存储在isLoggedIn中的值呈现Login和Logout之间的组件之一。 Message组件还将根据 state isLoggedIn的值返回不同的消息。
现在让我们看一下完成上述任务的完整程序：
打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：
源索引.js：
javascript
import React from 'react';
import ReactDOM from 'react-dom';
// Message Component
function Message(props)
{
if (props.isLoggedIn)
return Welcome User
;
else
return Please Login
;
}
// Login Component
function Login(props)
{
return(
);
}
// Logout Component
function Logout(props)
{
return(
);
}
// Parent Homepage Component
class Homepage extends React.Component{
constructor(props)
{
super(props);
this.state = {isLoggedIn : false};
this.ifLoginClicked = this.ifLoginClicked.bind(this);
this.ifLogoutClicked = this.ifLogoutClicked.bind(this);
}
ifLoginClicked()
{
this.setState({isLoggedIn : true});
}
ifLogoutClicked()
{
this.setState({isLoggedIn : false});
}
render(){
return(
{
(this.state.isLoggedIn)?(
);
}
}
ReactDOM.render(
javascript
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example()
{
const counter = 5;
return(
{
(counter==5) &&
Hello World!
}
);
}
ReactDOM.render(
javascript
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example(props)
{
if(!props.toDisplay)
return null;
else
return Component is rendered
;
}
ReactDOM.render(
输出：
在上面的输出中，您可以看到单击登录按钮时，消息和按钮 get 发生了变化，反之亦然。
将条件与逻辑 &&运算符一起使用
我们可以使用逻辑 &&运算符和一些条件来根据条件评估为真或假来决定输出中将出现什么。以下是使用带条件的逻辑 &&运算符的语法：
{
condition &&
// This section will contain
// elements you want to return
// that will be a part of output
}如果上述语法中提供的条件计算结果为 True，则 &&运算符后面的元素将成为输出的一部分，如果条件计算结果为 false，则大括号内的代码将不会出现在输出中。
下面的示例用于说明这一点：
打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：
源索引.js：
javascript
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example()
{
const counter = 5;
return(
{
(counter==5) &&
Hello World!
}
);
}
ReactDOM.render(
输出：
您可以在上面的输出中清楚地看到，当条件 (counter == 5) 评估为 true 时，
元素成功呈现在屏幕上。
防止组件渲染
有时我们可能不希望某些组件渲染。为了防止组件渲染，我们必须返回null作为其渲染输出。考虑下面的例子：
打开你的 react 项目目录并编辑 src 文件夹中的Index.js文件：
源索引.js：
javascript
import React from 'react';
import ReactDOM from 'react-dom';
// Example Component
function Example(props)
{
if(!props.toDisplay)
return null;
else
return Component is rendered
;
}
ReactDOM.render(
输出：
您可以在上面的输出中清楚地看到， Example组件被渲染了两次，但是