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
}

在这里，我们使用变量 output 来保存 UI。该组件的使用方法如下所示 −

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

组件将呈现如下所示的欢迎消息 −

逻辑 && 运算符

React 允许在 JSX 代码中使用任何表达式。在 Javascript 中，条件从左到右应用。如果最左边的条件为假，则不会处理下一个条件。开发人员可以利用此功能并在 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 为空，则不会进一步处理条件
一旦 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>
   );
}

组件将呈现如下所示的欢迎消息 −