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 props检查用户是否已登录。

• 如果用户已登录，则返回欢迎消息。

• 如果用户未登录，则返回登录链接。

组件的使用方法如下所示：

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为null，则不会进一步处理条件。

• 一旦props.users可用，则将检查数组的长度，并且只有当长度大于零时，才会进一步处理条件。

• 最后，将通过map函数遍历props.users，并渲染用户信息作为无序列表。

组件的使用方法如下：

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元素。开发者必须通过分析情况来选择方法。