React 中的条件渲染

百变鹏仔 3个月前 (10-14) #JavaScript

文章标签条件

react 中的条件渲染允许您根据某些条件（例如状态或道具）渲染不同的组件或元素。以下是一些实现条件渲染的常用方法：

1. 使用 if-else 语句

您可以在组件内使用标准 javascript if-else 语句。

function mycomponent({ isloggedin }) {    if (isloggedin) {        return <h1>welcome back!</h1>;    } else {        return <h1>please sign in.</h1>;    }}

2. 使用三元运算符

这是一种根据条件呈现内容的简洁方法。

function mycomponent({ isloggedin }) {    return (        <h1>            {isloggedin ? 'welcome back!' : 'please sign in.'}        </h1>    );}

3. 使用逻辑&&运算符

仅当条件为真时，您才可以使用逻辑 and 运算符来渲染组件。

function mycomponent({ isloggedin }) {    return (        <div>            {isloggedin &amp;&amp; <h1>welcome back!</h1>}            {!isloggedin &amp;&amp; <h1>please sign in.</h1>}        </div>    );}

4. switch 语句

对于更复杂的条件，可以使用 switch 语句。

function mycomponent({ status }) {    switch (status) {        case 'loading':            return <h1>loading...</h1>;        case 'success':            return <h1>data loaded successfully!</h1>;        case 'error':            return <h1>there was an error!</h1>;        default:            return null;    }}

例子

这是使用功能组件的完整示例：

import React from 'react';function App() {    const [isLoggedIn, setIsLoggedIn] = React.useState(false);    return (        <div>            <button onclick="{()"> setIsLoggedIn(!isLoggedIn)}&gt;                {isLoggedIn ? 'Logout' : 'Login'}            </button>            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}        </div>    );}export default App;

概括

根据您的情况复杂程度和个人编码风格选择最适合您需求的方法。如果您需要更多示例或解释，请告诉我！

文章推荐

React 中的条件渲染

1. 使用 if-else 语句

2. 使用三元运算符

3. 使用逻辑&&运算符

4. switch 语句

例子

概括

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？