React -如何有条件地返回一个值(或回退)
在React中，我们可以使用条件语句来有条件地返回一个值或回退。常用的方法有使用三元运算符和使用逻辑与(&&)运算符。
- 使用三元运算符： 三元运算符是一种简洁的条件语句，可以根据条件的真假返回不同的值。其语法如下：
condition ? value1 : value2其中，condition是一个表达式，如果为true，则返回value1，否则返回value2。可以在React的JSX代码中直接使用三元运算符进行条件渲染。例如，我们可以根据用户是否登录来显示不同的内容：
const isLoggedIn = true;
const message = isLoggedIn ? 'Welcome back!' : 'Please log in.';在上述代码中，如果isLoggedIn为true，则message变量的值为'Welcome back!'，否则为'Please log in.'。
- 使用逻辑与(&&)运算符： 逻辑与(&&)运算符也可以用来有条件地返回一个值或回退。其语法如下：
condition && value其中，condition是一个表达式，如果为true，则返回value。可以在React的JSX代码中使用逻辑与运算符进行条件渲染。例如，我们可以根据是否满足某个条件来显示组件：
const showComponent = true;
...
return (
<div>
{showComponent && <Component />}
</div>
);在上述代码中，如果showComponent为true，则会渲染Component组件，否则不会渲染。
综上所述，React中可以通过三元运算符和逻辑与运算符来有条件地返回一个值或回退。这些条件渲染的方法能够帮助我们根据不同的情况来动态地显示或隐藏组件、数据等内容。
腾讯云相关产品和产品介绍链接地址：
相关·内容
_id}>All</li> </> </ul>} 对于页面中的每个类别，它都会正确地返回一个类别标题或"All“。相反，我需要它只返回一个值(而不是每个类别返回一个值)。在纯文本中，如果任何一个类别段塞与exampleSlug匹配，则显示类别
浏览 35提问于2021-07-30得票数 0
回答已采纳
2回答
我有一个关于React.lazy()特性的问题。我开发了一个特性，我被困在了一个点上。我的场景
如果组件中发生了任何错误(可能是空指针错误或其他错误)，我需要显示回退ui。如果在延迟加载组件(即块加载失败或网
浏览 14提问于2022-01-22得票数 2
在React子组件中，我可以访问一个变量options，它返回一个对象数组。在这个组件中，我有一个函数来检查是否有选项：这将返回true或false。在我的父组件中，我需要这个布尔值来有条件地添加一些样式(基于布尔值)。
如何</em
浏览 2提问于2021-08-31得票数 0
回答已采纳
2回答
：render没有返回任何内容。这通常意味着缺少返回语句。为此，我实施了一名警卫。但是，如果我不立即从卫队返回元素，则反应就是抛出错误。
有人能告诉我如何解决这个错误吗？
浏览 5提问于2022-08-23得票数 3
回答已采纳
2回答
我想有条件地打电话给useContext。这是我的原始代码，它正确运行，但失败了tslint。错误：(react钩子-嵌套)一个钩子不能在条件表达式中使用。它不能正确运行，并且在useContext行Component2中失败--我的想法是，由于必须调用useContext 来修复tslint错误，所以我决定有条件地调用具有不同创建上下文的useContext如果变量inputResources被传入，它使用名为PlaceHolderContext的占位符上下文调用useContext，
浏览 4提问于2021-06-02得票数 4
回答已采纳
2回答
我想为devtools::document设置一个预提交钩子，如果devtools::document有任何改变，我想让提交失败。我检查了devtools::document源代码，它返回invisible()，所以不可能有条件地返回退出代码。
浏览 67提问于2017-07-06得票数 1
回答已采纳
4回答
我有一个react组件，它根据用户的登录状态有条件地呈现JSX。 { boolIsLoggedIn ?<SomeLoggedInComponent /> : <SomeNotLoggedInComponent /> }我认为我需要使用React.useState()和/或React.useEffect()，但我不确定具体如何实现它
浏览 10提问于2021-03-21得票数 0
我的应用程序中有一个端点名为/get-redirect，它基本上将您重定向到需要的位置。例如，如果您没有登录，则来自此端点的响应是一个HTTP200，响应中的redirect_location字段设置为mysite.com/login。如果您已登录，但尚未完成上机步骤2，则它将发送一个HTTP200，其中redirect_location设置为mysite.com/step2，等等。我希望将PrivateRoute用于经过身份验证的页面的React路由器中，并且希望任何重定向都能转到/
浏览 1提问于2021-05-01得票数 1
回答已采纳
我用的是React和阿波罗客户。 getNodesTwo { id title }`;
因此，在下面的React组件中，我想根据节点GraphQL值有条件
浏览 3提问于2021-11-28得票数 2
(虽然我知道这是一个解决问题的平台，但我觉得我仍然有权利问以下问题(因为我最后发布的原因)。这种呈现组件/标签的方式是通用的/建议的吗？潜在的缺点:可能会使返回语句变得冗长和混乱。
为什么我认为这是一个有效的所以问题:我记得之前的一个问题，在这个问题上，一个投了很多票的回答向我解释了我使用的函数，虽然它是有效的，但是被否决了。
浏览 4提问于2020-11-23得票数 0
回答已采纳
channel.send(embed).then(m => { m.react("<:warning
浏览 0提问于2022-03-23得票数 0
回答已采纳
在下面的代码中，我希望只有当状态更改为“成功”，而不是“失败”、“加载”或“init”时才重新计算successValue。因此，我将state === success作为对useMemo的依赖提供import{ render } from 'react-dom';
type Status = 'init' | 'loading&
浏览 5提问于2022-09-07得票数 0
回答已采纳
1回答
响应JSX组件并等待
、、、、
我有一个异步/等待函数，我想使用其结果在我的function本机应用程序中有条件地呈现一个jsx组件。text='EDIT' /> </di
浏览 2提问于2017-06-20得票数 1
回答已采纳
4回答
我用的是React 16.0。 render () {<div className="c"></div> : null} }有没有一种方
浏览 5提问于2017-12-16得票数 2
回答已采纳
我有一个应用程序在使用React。它包括反应路由器。在我的组件中，我需要读取查询字符串，如果查询字符串参数有一个值，则有条件地显示一个块。如果查询字符串中不存在该值，则需要显示另一个块。import React, {Component} from 'react';import {Na
浏览 1提问于2019-09-06得票数 0
回答已采纳
刚刚开始使用react-table，试图弄清楚如何根据访问器的值有条件地呈现一些东西。我从api调用中获取了一些数据，并将其中一个值用于访问器。{ id: "startTime",} 所以我有一个标题为"Action"的列，这里我想要有条件</e
浏览 21提问于2020-04-03得票数 0
回答已采纳
2回答
Spinner>) : (<Text color={useColorModeValue('gray.800', 'gray.400')>Hi</Text) }我应该如何渲染这些组件？useColorModeValue是一个钩子
浏览 13提问于2022-02-23得票数 1
回答已采纳
我使用了一个工具来从.svg文件创建React-native组件。它工作得很好，我可以用这种方式加载它们。实际上，如果我这样调用组件，它就能正常工作：然而，我希望(当然)有条件地加载一个组件，这取决于该组件接收到的属性。因此，我创建了一个函数：
浏览 1提问于2018-01-27得票数 2
回答已采纳
尝试使用AsyncStorage变量有条件地呈现内容。
我的应用程序使用的是来自react-navigation的react-navigation。我有一个名为Settings的选项卡，它必须根据用户是否登录(检查AsyncStorage)有条件地呈现内容。下面的代码适用于第一个呈现，但另一个选项卡可以更新AsyncStorage值，返回到设置选项卡，它仍然呈现初始内容。我可以使用哪种方法来实现这一
浏览 4提问于2019-06-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
