ReactJS - 条件渲染

React 中的条件渲染

条件渲染用于根据情况向用户显示/隐藏 UI 的某个部分。例如，如果用户未登录到 Web 应用程序，则 Web 应用程序将显示登录按钮。当用户登录到 Web 应用程序时，同一链接将被欢迎消息替换。

让我们学习一下 React 提供的支持条件渲染的选项。

条件呈现的方法

React 提供了多种在 Web 应用程序中进行条件渲染的方法。它们如下 -

• 条件语句
• JSX / UI 变量
• JSX 中的逻辑 & & 运算符
• JSX 中的条件运算符
• null 返回值

条件语句

条件语句是根据条件呈现 UI 的简单直接的选项。让我们考虑一下，要求是编写一个组件，该组件将根据用户的登录状态显示登录链接或欢迎消息。以下是使用条件渲染的组件的实现，

function Welcome(props) {
	 	if(props.isLoggedIn) {
	 	 	 return <div>Welcome, {props.userName}</div>
	 	} else {
	 	 	 return <div><a href="/login">Login</a></div>
	 	}
}

这里

• 使用 isLoggedIn 属性来检查用户是否已经登录。
• 如果用户已登录，则返回欢迎消息。
• 如果用户未登录，则返回登录链接。

该组件的使用方式如下图所示 C−

function App() {
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<Welcome isLoggedIn={true} userName={'John'} />
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

该组件将呈现欢迎消息，如下所示 -

JSX / UI 变量

React 允许将 JSX 元素存储到变量中，并在必要时使用它。开发者可以通过条件语句创建必要的JSX，并将其存储在变量中。一旦UI存储在变量中，它就可以如下图所示进行渲染 -

function Welcome(props) {
	 	let output = null;
	 	if(props.isLoggedIn) {
	 	 	 output = <div>Welcome, {props.userName}</div>
	 	} else {
	 	 	 output = <div><a href="/login">Login</a></div>
	 	}
	 	return output
}

在这里，我们使用了变量输出来保存 UI。该组件可以如下所示使用:

function App() {
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<Welcome isLoggedIn={true} userName={'John'} />
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

该组件将呈现欢迎消息，如下所示 -

逻辑 & 运算符

React 允许在 JSX 代码中使用任何表达式。在 Javascript 中，条件从左到右应用。如果最左侧的条件为 false，则不会处理下一个条件。开发人员可以利用此功能并在 JSX 本身中输出消息，如下所示 -

function ShowUsers(props) {
	 	return (
	 	 	 <div>
	 	 	 	 	<ul>
	 	 	 	 	 	 {props.users && props.users.length > 0 &&
	 	 	 	 	 	 	 	props.users.map((item) =>	
	 	 	 	 	 	 	 	 	 (
	 	 	 	 	 	 	 	 	 	 	<li>{item}</li>
	 	 	 	 	 	 	 	 	 )
	 	 	 	 	 	 	 	)}
	 	 	 	 	</ul>
	 	 	 </div>
	 	);
}
export default ShowUsers;

这里

• 首先，将检查 props.users 的可用性。如果 props.users 为 null，则不会进一步处理该条件
• 一旦 props.users 可用，则将检查数组的长度，只有当长度大于零时，才会进一步处理条件
• 最后，props.users 将通过 map 函数进行循环，用户信息将呈现为无序列表。

该组件可以如下所示使用:

function App() {
	 	const users = ['John', 'Peter']
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<ShowUsers users={users} />
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

该组件将呈现用户，如下所示 -

JSX 中的条件运算符

由于 React 允许在 JSX 中使用任何 javascript 表达式，因此开发人员可以在 JSX 中使用条件运算符 （a =b ？ x ： y） 并仅渲染必要的 UI 元素，如下所示 -

function Welcome(props) {
	 	if(props.isLoggedIn) {
	 	 	 return props.isLoggedIn ?
	 	 	 <div>Welcome, {props.userName}</div> : <div><a href="/login">Login</a></div>
	 	}
}

在这里，我们使用了条件运算符来显示欢迎消息或登录链接。该组件可以如下图所示使用 -

function App() {
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<Welcome isLoggedIn={true} userName={'John'} />
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

该组件将呈现欢迎消息，如下所示 -

null 返回值

只有当组件返回 UI 元素时，React 才会渲染组件。否则，它会静默跳过呈现，而不会显示任何错误消息。开发人员可以利用此功能，仅在满足条件时渲染某些 UI。

function Welcome(props) {
	 	return props.isLoggedIn ? <div>Welcome, {props.userName}</div> : null
}

这里

• 我们使用了条件运算符来显示/隐藏欢迎消息
• null 不呈现任何 UI

该组件可以如下所示使用:

function App() {
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<div>Welcome component will not output any content</div>
	 	 	 	 	 	 	 	 	 <Welcome isLoggedIn={false} />
	 	 	 	 	 	 	 	</div>
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}

该组件将呈现欢迎消息，如下所示 -

总结

React 提供了多种方式来有条件地渲染 UI 元素。开发人员必须通过分析情况来选择方法