react JavaScript三元条件运算
React是一个用于构建用户界面的JavaScript库。它是由Facebook开发并开源的，被广泛应用于Web应用程序的开发中。
JavaScript三元条件运算是一种简洁的条件语句，用于根据条件的真假来返回不同的值。它的语法如下：
condition ? expression1 : expression2
其中，condition是一个条件表达式，如果该表达式的值为真，则返回expression1的值；如果该表达式的值为假，则返回expression2的值。
三元条件运算在React中的应用非常广泛，可以用于根据条件来渲染不同的内容或执行不同的操作。例如，可以根据用户是否登录来显示不同的导航栏、根据数据是否加载完成来显示不同的加载状态等。
在React中，可以将三元条件运算直接嵌入到JSX代码中，以实现动态渲染。例如：
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
</div>
);
}上述代码根据isLoggedIn的值来渲染不同的提示信息。
腾讯云提供了一系列与React开发相关的产品和服务，包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址如下：
- 云服务器（CVM）：提供可扩展的虚拟服务器，适用于部署React应用程序。详情请参考：云服务器产品介绍
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于存储React应用程序的数据。详情请参考：云数据库MySQL版产品介绍
- 对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储React应用程序的静态资源。详情请参考：对象存储产品介绍
请注意，以上推荐的产品和服务仅为示例，实际选择应根据具体需求进行评估和决策。
相关·内容
我试图在一个基于类的组件中的if..else方法中编写一个javascript render语句，但出现了一个我无法诊断的错误。
import React, { Component } from 'react';
import Slider from 'react-input-slider';
class RangSlider extends Component {
state = {
x: 0.3,
};
render() {
return (
<React.Fragmen
浏览 0提问于2020-07-30得票数 0
我只是不知道如何匹配两个语句，比如if else of JavaScript in React
例如，
if(array.length != null && array.length >= 2){
alert("Array Is Greater Than 2")
}else if(array.length != null ){
alert("Array Is Less Than 2")
}else{
alert("Array is null")
}
我知道如何通过信号条件的反应
例如，
{
浏览 0提问于2018-07-10得票数 6
回答已采纳
1回答
我刚刚开始使用ReactJS，目前正在将ReactJS实现到我当前的项目中。我现在正在尝试做的事情如下：
我有一个包含多个文件名的XML-file (它们是在另一个点上动态添加的，这与这个问题无关。无论如何，我的观点是，您无法预测该文件中将包含什么/有多少元素)。我使用XMLHttpRequest和JavaScript，以便将数据保存到列表中。按钮上的OnClick，我想要显示/隐藏所述列表。我正在使用ReactJS创建按钮。
创建按钮：
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
浏览 0提问于2017-12-13得票数 1
我正在研究一些编码示例，并在React中看到了一个组件声明的示例：
export const TodoList = ({ todos }) => (
<ul>
{
todos && todos.length
? todos.map((todo, index) => {
return <Todo key={`todo-${todo.id}`} todo={todo} />
})
: "N
浏览 2提问于2019-06-15得票数 1
回答已采纳
5回答
reactjs中的条件内渲染方法
、、、、
我是新来的反应。
我面临语法错误，你们能告诉我如何修复它吗？
提供下面的代码。如果条件的话，我有没有遗漏任何括号？
./src/view/view.jsxModule构建失败: SyntaxError: C:/ === //src/视图/view.jsx:意外令牌( 129 :41) 127-128>129个如果(this.props.playerInfo.fundingDetailId=== null) _{ 131 x 132收
import React, {Component} from 'react';
import {connect}
浏览 6提问于2017-02-21得票数 0
回答已采纳
我在JavaScript中读到了以下状态：
this.fade = (fade == undefined ? 5 : fade);
这对我来说是新的，所以我不知道这意味着什么。
浏览 1提问于2019-05-11得票数 1
回答已采纳
我正在读取一个JSON文件。在某些记录中，属性Attachments基本上是一个数组，而在某些记录中，它不存在。我试图应用一个条件呈现，它将检查该属性是否存在于记录中，然后它将呈现它的元素，否则它将跳过记录。它给我的错误是“无法读取未定义的属性(读取'map')”。我的代码如下：
{data.map((record) => (
<tr>
<td>{record.UniqueName}</td>
浏览 3提问于2022-06-29得票数 0
回答已采纳
我刚刚学习了如何使用Javascript三元条件运算符。
condition ? true : false
问题是，我想使用只有假表达式的运算符.
我所期望的
condition : false expression
但是上面的代码不起作用，有办法吗？
浏览 4提问于2020-08-04得票数 0
我在react中有一个布尔属性，我正在尝试使用它，如下所示：
const MyComponent = ({ prop1, prop2, isBoolean }) => {
...do something..
return (
if (isBoolean) ? (do this) : (do that)
}
所以我的意思是，如果isBoolean是真的，那么做这个，否则做那个。这是正确的语法吗？
浏览 2提问于2017-07-25得票数 0
4回答
我有一个理解一些JavaScript语法的问题，如下所示：
var myObject = {
value: 0;
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
};
myObject.increment( );
document.writeln(myObject.value); // 1
myObject.increment(2);
document.writeln(myObject.value); // 3
具体
浏览 0提问于2012-01-11得票数 1
回答已采纳
为什么Javascript中带有三元运算符的以下代码会引发SyntaxError：
firstblock:{
a||b ? console.log(1) : (console.log(2), break firstblock);
console.log(3);
}
但是，下面使用if/not而不是三元没有：
firstblock:{
if(a||b) {console.log(1)} else {console.log(2); break firstblock};
console.log(3);
}
浏览 1提问于2019-06-04得票数 0
回答已采纳
3回答
我有一个功能组件，其中我有一个按钮，我正在检查这个按钮是否在视图中，并将它作为布尔值存储在"isElementVisible“中。
我想在这里做条件样式，如果isElementVisible === false，那么我想让它粘稠，否则就保持原样。
当isElementVisible === false时所需的样式：
.apply-btn{
margin: 0;
width: 100%;
@include media-breakpoint-up(lg) {
width: 17rem;
浏览 14提问于2022-07-14得票数 1
2回答
React原生代码：
const StyledButton = styled.TouchableHighlight`
width:250px;
background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")};
padding:15px;
border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)}
justify-content:center;
margin-bott
浏览 5提问于2020-05-26得票数 1
回答已采纳
2回答
HTML标记中的条件呈现
、、、
我必须检查用户是否有空，如果是的话，背景样式是设置的。我可以简单地通过PHP使用if语句完成此操作，但如何使用react完成此操作？
到目前为止，我所拥有的：
<a className={classes} onClick={this.toggleDialog} { theUser.get('isAvailable') == 1 && style={{backgroundColor: "rgba(39, 174, 96, .15)"}} } >
{theUser.get('first_name')}
</a
浏览 1提问于2018-06-06得票数 0
7回答
可能重复：
我为wordpress下载了一个插件，在这个插件中有一个javascript。在js代码中，我不明白它是如何工作的。
function ddet_javascript() {
echo '
<script language="JavaScript" type="text/javascript"><!--
function expand(param) {
param.style.display=(param.style.display=="none") ? "" : "n
浏览 4提问于2012-08-30得票数 0
回答已采纳
我不能在react js中调用多个函数。 const preATCHandler = ( id, itemNumber ) => {
itemNumber > 0
? (setAtcBtn(false), setQty(itemNumber), dispatch(addToCart(id, Number(itemNumber))))
: (dispatch(removeFromCart(id)), setAtcBtn(true))
}
浏览 9提问于2021-07-25得票数 1
在JavaScript中，以下函数是什么意思？
let Kim =(hour >= 12)? " PM ":" AM ";
console.log(Kim);
浏览 1提问于2022-10-07得票数 -1
我的gatsby站点使用的是netlifyCMS。我有一个图像字段是可选的，但它当然会失败，并出现'childImageSharp is null‘错误，因为我已经指定了它，它正在查找它。
这是我在尝试三元之前的文件：
import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
import Img from "gatsby-im
浏览 25提问于2020-11-13得票数 2
回答已采纳
我喜欢在JavaScript中这样做：
function (a, b, c) {
var foo = a || b || c;
return foo.bar;
}
是否有使用回退进行分配的快捷方法，或者是否需要自定义function
浏览 0提问于2011-07-22得票数 14
回答已采纳
以下结构的正确术语/名称是什么：
string myString = (boolValue==true ? "true": "false");
浏览 0提问于2012-01-18得票数 6
回答已采纳
我有下面的模板，它包含className属性的表达式，我希望每次React调用render方法时都会对其进行评估：
<ul className='ratings' onClick={this.handleClick}>
<li className={'fa-star ' + (this.rating > 0) ? 'fas' : 'far'}></li>
</ul>
我希望它被转换成这个和这实际上是什么
React.createElement(
'ul&
浏览 0提问于2018-08-29得票数 2
回答已采纳
在React应用程序中，我使用此代码将值设置为url路径param：
const [exchangeId, setExchangeId] = useState('');
.....
const endURL = `?page=${paginationState.activePage}&sort=${paginationState.sort},${paginationState.order}&exchangeId=${exchangeId}`;
.....
当我没有设置值exchangeId时，我总是得到空url param exchangeId=
浏览 1提问于2022-02-16得票数 0
回答已采纳
4回答
下面的Javascript语法是什么意思？请描述整个语法：
var x = 0;
x > 0 ? 1 : -1; // confused about this line
alert(x);
浏览 3提问于2012-05-13得票数 5
3回答
因此，我使用了一个在线JavaScript优化器，它对我的IF语句做了一些奇怪的事情，这对我来说是新的。
{1===a?window.addEventListener("scroll",turnOff):0===a&&window.removeEventListener("scroll",turnoff)}
这到底是什么？请帮我理解一下它的各个部分。
浏览 8提问于2014-09-28得票数 0
回答已采纳
2回答
我有一个React应用程序，它包含到子路由的链接，我使用子域/路径来填充每个细节页面上的支持。
换句话说，当用户导航到页面时，我使用pathname填充页面标题和内容等内容。其中一个页面/路径包含一个通常用上骆驼大小写( "SoCal“)编写的名称/标题，因此我使用以下代码，该代码包含一个三元操作符，该运算符确定是否为location = "socal"，如果有，则希望将location变量设置为”SoCal“，以便当我使用<h1>{location}</h1>填充页面标题时，它将被正确显示。
问题是，当我使用三元运算符时，它总是将位置设置为So
浏览 0提问于2020-08-24得票数 1
回答已采纳
3回答
目前，我的代码中有一个JavaScript函数：
getCoverPhoto(item) {
if (item != undefined && item.gallery != undefined && item.gallery[0] != undefined)
return item.gallery[0].media;
return "";
}
如何简化上述if条件？如果不能简化，还能用更好的方式写吗？
浏览 6提问于2020-03-08得票数 0
回答已采纳
我正在尝试在React中创建一个待办事项应用程序。到目前为止，我编写的代码将待办事项添加到待办事项列表中。当我点击编辑图标时，我已经为完成图标设置了turnery条件，但它不工作。有人能解释一下我的代码出了什么问题吗？ App.js import './App.css';
import React, { useState } from 'react';
import TodoList from './TodoList';
import { v4 as uuidv4 } from 'uuid';
function App() {
浏览 28提问于2021-02-04得票数 0
回答已采纳
我想知道为什么在事件侦听器回调函数中使用三元操作符不能工作，但是完整的if语句工作得很好。获得第一个代码的错误消息(“期望一个赋值或函数调用，而不是看到一个表达式”)。
import React, { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
const addCount = () => {
setCount(count + 1);
};
const removeCount = () => {
c
浏览 1提问于2022-09-30得票数 0
当文本输入边框被选中时，我想改变它的颜色，下面是我的代码：
import React, { useState, useEffect, useRef, Component} from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, TextInput, Alert } from 'react-native';
export default class InputOTPScreen extends Component {
construct
浏览 19提问于2021-03-10得票数 1
1回答
我是个反应新手。假设有一个通知的钟形图标。一旦单击，将有一个最近收到的通知摘要，下面有一个按钮。单击该按钮时，我希望将最近的通知组件替换为包含过去通知的列表，而不需要转到不同的页面。如何在初始按钮上实现onClick处理程序？我应该使用react-router吗？
Notif.jsx (recent notifs)
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
imp
浏览 5提问于2022-03-10得票数 -1
2回答
反应条件渲染的最佳实践？
、、、
我有一个div/区段，在切换按钮时应该显示它。
{
this.state.viewButtonClicked ? <Solution solution= {this.state.activeSolution}/> : <React.Fragment/>
}
是否需要使用三元操作符？
在这种情况下，如果按钮是错误的，那么最好的做法是不显示什么呢？
React.Fragment还好吗？
基本上，如果viewButtonClicked为false，我希望返回/呈现空。
浏览 1提问于2020-07-03得票数 0
回答已采纳
我只是在工作时用C#重写一个旧的C#应用程序，所以我想在实际工作缓慢的情况下，我会到处乱搞，尝试学习新的东西。这是一种冗余，并且违背了IF/ can语句的目的，我想，但是这样的事情可以做吗？
public static bool IsAlpha(string s, bool allowSpaces)
{
foreach (char c in s)
{
if (!(allowSpaces) ? (char.IsLetter(c) || c.Equals(' ')) : char.IsLetter(c))
return fal
浏览 3提问于2015-07-10得票数 0
回答已采纳
1回答
我正在使用React为我的前端应用程序创建主页。
我希望它将用户定向到登录页面，如果他还没有登录，并将他定向到另一个页面，如果他已经登录了。我正在检查浏览器是否知道使用getCurrentUser ()函数的用户。
这是我试图在主页上做的事情。
SignIn和Myprofile是我想要呈现的React组件。
function App() {
return (
{if getCurrentUser()==null {return <SignIn/>} else return { <Myprofile/>}}
)
这是getCurrentUser ()的定义：
浏览 0提问于2020-12-16得票数 0
有没有可能在JavaScript中做这样的事情？
max = (max < b) ? b;
换句话说，仅当条件为真时才赋值。如果条件为false，则不执行任何操作(无赋值)。这个是可能的吗？
浏览 0提问于2013-02-22得票数 64
回答已采纳
大家好，我已经写了一些javascript代码来显示一些依赖于另一个下拉列表的值。因此，现在我想在我的编辑页面中显示这些选定的值。 下面是我的代码： function getSubjectsTopics(subject_id)
{
if(subject_id) {
loading_show();
axios.get("/master/topic/get-topic-by-subject-id/" + subject_id)
.then(function(response) {
var opti
浏览 7提问于2020-10-27得票数 0
回答已采纳
我想知道将组件保存到状态会对性能产生什么影响，这样做是否违反了良好的实践？
例如，假设我有一个HOC，其中我正在向其传递一个回调，它将返回一个具有我所需的所有功能的组件，并将在随后调用我的回调。请参考下面的示例：
import React, { PureComponent } from "react";
import {
someHOCthatReturnsAComponentClass,
OtherComponent
} from "../some-folder";
export class A extends PureComponent {
s
浏览 5提问于2019-08-08得票数 0
我有这个： <select
onInput={(e) => onTyping(e.target.name, e.target.value)}
name="site"
id="site"
onChange={handleInputChange}
>
<option value={myData.site}>{myData.site}</option>
<option value="
浏览 21提问于2021-09-01得票数 0
回答已采纳
1回答
滚动反应时重现工具提示
、、、、
提前感谢你的帮助，我有一个工具提示的问题，我应该在给定条件时显示工具提示，但由于重新呈现列表时的滚动，验证失败。这里是正确的，完整的列表显示了它应该在的地方的工具提示。
但是，当我向下滚动时，视图被重新渲染，工具提示失败。
这个想法是，当我使用这个布尔disableHoverListener={textDoesOverflow}时，当我的组名太长时，应该显示工具提示(和下划线)，并且它在开始时是有效的，但是之后...失败。
这是代码和样式。请帮帮我！！
export const BaseFilteredUsersGroups: React.FC<IFilteredUsersGro
浏览 11提问于2021-05-13得票数 0
3回答
我有一个JavaScript函数的速记版本，我想知道如果它是正常的，它会是什么样子呢？
var criteriaField = criteria.hasOwnProperty('searchTerm') ? 'name': 'price';
浏览 14提问于2017-09-29得票数 1
回答已采纳
我最近用javascript编写了很多程序，并试图在PHP中使用一些速记。
请考虑这一声明：
$value = 1;
return $value == 1 ?
'a' : $value == 2 ? 'b' : 'c';
有人能解释一下为什么在jQuery中返回'a'，在php中返回'b'吗？
浏览 3提问于2017-09-26得票数 3
回答已采纳
1回答
我正在创建一个自动化脚本来做一个测试。因此，当我脚本试图通过单击“注销”来注销时，它会提示确认窗口，其中脚本必须选择“确定”
Source page looks likes:
<script type="text/javascript">
function logOut() {
if (confirm("Are you sure you want to log out of the system?\nClick OK for Yes or CANCEL for No"))
l
浏览 0提问于2018-04-21得票数 0
2回答
我使用Material UI的switch。当开关打开时，我希望标签上写着“开关打开”，当开关关闭时，我希望标签上写着“开关关闭”。我是新来的州，所以希望能得到一些帮助来实现这一点！ 下面是我的代码： import React from 'react';
import Switch from '@material-ui/core/Switch';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/
浏览 11提问于2021-01-05得票数 0
回答已采纳
我的第一个帖子，所以请不要太在意我；)…
下面的代码是一个菜单，它允许我单击菜单项并被重定向到特定的URL。但是，使用下面的代码时，我收到一个错误消息：
意外标记“：”<--引用以ret === 0开头的行?“
如果我删除最后两个window.location.assign命令，它将适用于菜单中的前两个项目。我假设这是我的语法问题，我到底做错了什么？
谢谢!
伊莱亚斯
4 item MENU
</div&
浏览 7提问于2018-01-31得票数 0
回答已采纳
1回答
我在SSR React应用程序的箭头函数中遇到了一个非常奇怪的问题。我想做的基本上是有条件地将组件加载到变量中，但我得到的是非常奇怪的变量/条件行为。 在情况1中:我得到了正确的行为，而strangeComponent得到了空值 const isClient = false;
const strangeComponent = false ? (<Field
name={name}
isMulti
component={({ input, ...rest }) => (
<Select {...input} {...rest} searchable
浏览 28提问于2020-09-29得票数 0
在React-Native中，我使用了我想要的组件<SimpleLineIcons name='heart' size={32} style={{position: 'absolute', left: 10}}/>，这样当我单击它时，它就会被替换为这个组件<AntDesign name='heart' size={32} color="red" style={{position: 'absolute', left: 10}}/>。我该怎么做呢？
浏览 24提问于2021-04-03得票数 1
回答已采纳
1回答
给定：
const Item = styled.div`
color: ${p => p.blue ? 'blue' : 'black'};
`;
我需要在带有样式组件的div标签(Item)下动态添加dom元素。如果这是JQuery或JavaScript，则需要获取div的类或id，
你如何在react中做到这一点呢？
浏览 0提问于2018-05-21得票数 0
我正在努力学习速记我的javascript，但坚持了下面的一个。
if (windowwidth >= 960){
widthofwindow = 1;
yooucandoit()
} else {
widthofwindow = 0;
$('#topbar').remove();
}
浏览 4提问于2013-08-07得票数 0
回答已采纳
我有一个代码，在按钮点击时在深色主题和浅色主题之间切换，如下所示： App.js： import React, { useState } from "react";
import Card from "./Card";
import { ChangeTheme } from "./functions/ChangeTheme";
export default function App() {
const [theme, setTheme] = useState("dark-theme");
const changeTh
浏览 36提问于2021-01-19得票数 0
回答已采纳
一般来说，在Javascript中，假设我得到了以下代码：
return (dispatch) => {
return axios.post(`${ROOT_URL}/company`, data).then(companyResponse => {
}).catch(error => {
throw (error);
});
};
现在，在某些情况下，我想用一些参数(如上面所写的)调用"post“方法，而在其他情况下，我希望在不同的参数中使用"put”。就像这样：
// Pseudo code
if(some con
浏览 0提问于2018-05-03得票数 0
回答已采纳
2回答
但是，我使用的是JavaScript示例，但这并不意味着它只是一个JavaScript问题，因为对于PHP来说，结果是相同的，而且我希望有许多语言。我“处理”了我缺乏理解的问题，使用了大量的括号，然而，现在是时候处理它了。
给出了下面的脚本(也在上)。
function testTernary(isjane) {
var str = 'hello ' + isjane ? 'Jane' : 'Mary';
console.log(isjane, str);
}
testTernary(true);
testTernary(false);
浏览 6提问于2016-01-27得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
