React三元运算符首先显示":“块。为什么？
React三元运算符首先显示":"块的原因是它遵循JavaScript中的条件运算符语法。条件运算符由三个部分组成，即条件表达式、真值分支和假值分支。当条件表达式的结果为真时，返回真值分支的结果；当条件表达式的结果为假时，返回假值分支的结果。
在React中，三元运算符通常用于根据条件来渲染不同的内容或组件。它可以在JSX语法中嵌入，用于根据条件动态地生成不同的UI元素。
举个例子，假设我们有一个状态变量isLogged，表示用户是否已登录。我们可以使用三元运算符来根据isLogged的值来渲染不同的UI内容：
{isLogged ? <LoggedInComponent /> : <LoggedOutComponent />}上述代码中，如果isLogged为真，则渲染<LoggedInComponent />；如果isLogged为假，则渲染<LoggedOutComponent />。通过这种方式，我们可以根据用户登录状态来动态显示不同的内容。
React三元运算符的优势在于它提供了一种简洁且灵活的方式来处理条件渲染。它可以帮助我们根据不同的条件动态地呈现不同的UI，并使代码易于阅读和维护。
腾讯云提供的相关产品中，与React三元运算符相关的产品可能包括云函数（Serverless Cloud Function）和前端部署（CloudBase）等。云函数可以用于编写和部署运行在云端的无服务器函数，而前端部署则提供了一种方便的方式来部署和托管前端应用程序。具体的产品介绍和链接地址可以在腾讯云官方网站上查询。
请注意，答案中没有提到其他流行的云计算品牌商，因为题目要求不提及这些品牌商。
相关·内容
大家好，我已经写了一些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
回答已采纳
1回答
我试图将mealContainer重定向到Meals，以显示该数据的详细信息。顺便说一句，我正在使用mealDB作为API。但问题是，当我单击div来显示细节时，它有时会变成空，有时会显示数据。我不知道为什么会发生这种事。因此，我试图通过使用三元操作符来显示当它是空时的警告。我怎么能这么做？
import React, { useState } from "react";
import Meals from "../Meals/Meals";
import "./MealCategory.css";
const MealCategory = (
浏览 4提问于2022-01-09得票数 -1
回答已采纳
我正在学习React，实际上我不明白为什么当我按下一个按钮时，我的状态没有立即改变，因为有一个click事件。我的意思是，我创建了一个状态"test: false"，但是当我点击我的按钮时，我只想改变状态，所以我使用了setState。但当我第一次点击时，控制台仍然会显示"false“。
import React from "react";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props)
浏览 0提问于2020-02-20得票数 0
我正在研究一些编码示例，并在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
回答已采纳
我正在获取一个JSON文件，并希望对其进行可视化的树形表示。
文件本身非常大，因此我想要的是使用一个循环来只显示在对象中找到的第一个键(在迭代中)。具有子节点的关键点旁边会显示一个箭头。
我有一个TreeItem组件：
<TreeView>
<TreeItem nodeId="1" label="First Key" />
<TreeItem nodeId="2" label="Second Key">
<TreeItem nodeId="3" label=
浏览 18提问于2019-11-05得票数 0
1回答
给定：
const Item = styled.div`
color: ${p => p.blue ? 'blue' : 'black'};
`;
我需要在带有样式组件的div标签(Item)下动态添加dom元素。如果这是JQuery或JavaScript，则需要获取div的类或id，
你如何在react中做到这一点呢？
浏览 0提问于2018-05-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
回答已采纳
我试图在一个基于类的组件中的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
3回答
我正在将流添加到现有代码中。我有很多使用条件渲染的地方:例如
import React from "react";
export default function App() {
let visible = true;
return (
visible && (
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
)
);
}
添加流时出现错误inexact boolea
浏览 16提问于2020-02-04得票数 0
回答已采纳
2回答
为什么使用这样的三元是不正确的，哪里好像使用如果是正确的？
//Error when using as ternary
Character.isDigit(myDto.getNameStr().charAt(0)) ? digitArrayList.add(myDto) : charArrayList.add(myDto);
//OK when used as if ... else
char c = myDto.getNameStr().charAt(0);
if(Character.isDigit(c)) {
digitArrayList.add(myDto);
} else {
浏览 0提问于2015-05-19得票数 3
回答已采纳
1回答
我试图显示它是夏季还是冬季，基于延迟和月份日期，错误应该是赋值或函数调用，而不是看到表达式no-unused expression
import React from 'react';
const getSeason = (lat, month) =>{
if (month > 2 && month < 9){
lat >0 ? 'summer': 'winter';
}else{
lat > 0 ? 'winter': 'su
浏览 0提问于2020-03-16得票数 2
我想知道为什么在事件侦听器回调函数中使用三元操作符不能工作，但是完整的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
3回答
我是一个反应js和redux技术的新手，我正在尝试在JSX中包含一个IF语句，以便只有当我的状态没有设置为‘fontAwesome’时才显示一个添加图标。下面是我的代码。
import React, { Component } from "react";
import RegionList from "./RegionList";
import RegionForm from "./RegionForm";
import { Row, Col, Container } from "react-bootstrap";
import
浏览 0提问于2020-01-24得票数 1
2回答
反应条件渲染的最佳实践？
、、、
我有一个div/区段，在切换按钮时应该显示它。
{
this.state.viewButtonClicked ? <Solution solution= {this.state.activeSolution}/> : <React.Fragment/>
}
是否需要使用三元操作符？
在这种情况下，如果按钮是错误的，那么最好的做法是不显示什么呢？
React.Fragment还好吗？
基本上，如果viewButtonClicked为false，我希望返回/呈现空。
浏览 1提问于2020-07-03得票数 0
回答已采纳
1回答
我在5:7收到了一个“意想不到的令牌”。我不明白为什么。
var Navbar = React.createClass({
render: function() {
const { dispatch, isAuthenticated, errorMessage } = this.props
return (
{!isAuthenticated &&
<Login
errorMessage={errorMessage}
onLoginClick={ () => dispatc
浏览 0提问于2016-03-03得票数 0
#include<stdio.h>
int main(void)
{
int x=1,y=0;
x>y?printf("Hello World"):return x;
}
为什么它会显示错误：“返回”之前的预期表达式？这里需要改变什么东西？
浏览 2提问于2020-09-18得票数 1
回答已采纳
1回答
为什么下面的代码可以很好地处理if/ not而不是三值运算符？
ListView(
children: [
// Commented code not working
// isLogged ? ...loggedRows(context) : loginRow(context),
// Working code
if (isLogged)
...loggedRows(context)
else
loginRow(context),
ListTile(...),
ListTile(...),
]
浏览 2提问于2021-10-21得票数 1
回答已采纳
import { Route, Redirect } from 'react-router-dom';
import React, { useContext } from 'react';
import AuthContext from '../contexts/AuthContext';
function PrivateRoute({ children, ...rest }) {
const auth = useContext(AuthContext);
return(
<Route
浏览 31提问于2021-09-24得票数 0
1回答
我是ReactJS的初学者，我对三元操作符有困难。
在此代码中使用三元操作符(？:)无法找到更好的解决方案，当我尝试时，会收到错误或代码不工作(没有显示类型)。
我的代码(如果其他的话)一切正常：
const TypeChecker = (product) => {
if (
product.width === null &&
product.length === null &&
product.height === null
) {
} else {
return (
浏览 10提问于2022-08-30得票数 0
1回答
**我有一个显示当天新闻的代码。我有10个类，名为“块”。在“块”类中，有两个名为"blockText“的类。我需要得到两个不同的类名，而不是相同的，我想得到这个结果"blockText1“和怎么做？**
import React from 'react';
import newsStyle from './News_module.css';
export class News extends React.Component {
render() {
const resultsRender = [];
浏览 2提问于2020-10-11得票数 0
回答已采纳
我用大括号中的三元操作符设置一个箭头函数作为setState的回调，但在运行代码时会得到错误消息。
如果我移除花括号，错误就消失了。
如果我不使用三元操作符，错误就会消失。
如果在操作符之前写“返回”，错误就会消失。
代码是双向工作的(看起来它运行的是某种救援方法)，但我不明白为什么要从一开始就得到错误消息。我正在运行的函数不需要返回任何内容，只需要运行一些语句。但似乎React不像回调中的三元操作符吗？或者他们还好吗？有人知道为什么吗？
this.setState({someObject},() => { x ? console.log("yo
浏览 0提问于2018-05-24得票数 2
我听不懂。简而言之，我有这两个在状态中使用的变量 questionLoaded
gameOver 此组件需要等待，直到它使用函数selectRandomQuestion完成数据获取。 因此，如果我删除了questionLoaded，当它在映射中循环时，它会给我异常。 现在，我必须创建另一个变量来检查游戏何时结束以取消呈现这个组件，因此出现了questionLoaded || gameOver ? 我尝试检查变量currentQuestion以有条件地呈现，但由于某种原因，在循环此属性的options数组中的映射时会出现异常。这意味着当命中条件检查时，currentQuestion在它自己的子
浏览 20提问于2020-09-25得票数 1
1回答
我刚刚开始使用ReactJS，目前正在将ReactJS实现到我当前的项目中。我现在正在尝试做的事情如下：
我有一个包含多个文件名的XML-file (它们是在另一个点上动态添加的，这与这个问题无关。无论如何，我的观点是，您无法预测该文件中将包含什么/有多少元素)。我使用XMLHttpRequest和JavaScript，以便将数据保存到列表中。按钮上的OnClick，我想要显示/隐藏所述列表。我正在使用ReactJS创建按钮。
创建按钮：
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
浏览 0提问于2017-12-13得票数 1
alert("test: "+(1==2)?'hello':'world');
这应该会在屏幕上显示'world'，因为1不等于2。
为什么它会提醒'hello'
浏览 0提问于2012-10-12得票数 52
回答已采纳
我有这个： <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
回答已采纳
booking.save(function (error, data) {
error ? console.log(error) : res.redirect('/');
});
此代码导致以下错误以Sublime文本显示：
Expected an assignment or function call and instead saw an expression
为什么会这样呢？我的代码出了什么问题？它是100%工作的。我看不出有什么错误。
浏览 4提问于2015-01-19得票数 0
我正在修复一些代码，并试图理解正在发生的某个评估。这里写了一个小片段，其中应该有两个评估，如下所示：
const active = true;
const isPerson = true;
const person1Time = null;
const person2Time = null;
// this one is not working as intended
const original = !active && isPerson ? !person1Time : !person2Time;
console.log("original", or
浏览 4提问于2019-12-02得票数 3
回答已采纳
2回答
我试图在react中使用带映射循环渲染的条件，但是我收到了错误。
代码如下：
const navbarValue = [{"Category":"Home","Status":1},{"Category":"About","Status":0},{"Category":"Contact","Status":0}];
function NavbarActive(props) {
return (
<li className=
浏览 0提问于2017-07-16得票数 1
回答已采纳
2回答
我有一个React应用程序，它包含到子路由的链接，我使用子域/路径来填充每个细节页面上的支持。
换句话说，当用户导航到页面时，我使用pathname填充页面标题和内容等内容。其中一个页面/路径包含一个通常用上骆驼大小写( "SoCal“)编写的名称/标题，因此我使用以下代码，该代码包含一个三元操作符，该运算符确定是否为location = "socal"，如果有，则希望将location变量设置为”SoCal“，以便当我使用<h1>{location}</h1>填充页面标题时，它将被正确显示。
问题是，当我使用三元运算符时，它总是将位置设置为So
浏览 0提问于2020-08-24得票数 1
回答已采纳
1回答
滚动反应时重现工具提示
、、、、
提前感谢你的帮助，我有一个工具提示的问题，我应该在给定条件时显示工具提示，但由于重新呈现列表时的滚动，验证失败。这里是正确的，完整的列表显示了它应该在的地方的工具提示。
但是，当我向下滚动时，视图被重新渲染，工具提示失败。
这个想法是，当我使用这个布尔disableHoverListener={textDoesOverflow}时，当我的组名太长时，应该显示工具提示(和下划线)，并且它在开始时是有效的，但是之后...失败。
这是代码和样式。请帮帮我！！
export const BaseFilteredUsersGroups: React.FC<IFilteredUsersGro
浏览 11提问于2021-05-13得票数 0
3回答
请看一下下面的代码
int a =10;
int b =20;
System.out.println((a>b)?'a':65);//A
System.out.println((a>b)?a:65);//65
System.out.println((a>b)?"a":65);//65
谁能解释一下，如果我把variable 'a'设为一个字符，为什么会显示"A“？如果我将"a"设为字符串，它应该显示65？
浏览 1提问于2015-05-04得票数 2
我正在尝试在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
回答已采纳
1回答
汉堡包菜单没有关闭反应
、、、、
import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./index.css";
const Navbar = () => {
const [display, setDisplay] = useState(false);
const toggle = () => setDisplay(!display);
return (
<>
浏览 4提问于2022-03-14得票数 0
回答已采纳
9回答
为什么三元操作符没有块？换句话说，为什么下面的代码不能工作，并报告{}大括号的错误？
int main()
{
int i = 1;
(i==1)?{printf("Hello\n")}:{printf("World\n")};
return 0;
}
编辑
也许这个问题被误解了。它是:为什么不支持块？为什么只有一个表情？
为什么不允许这样做呢？
int main()
{
int i = 1;
(i==1)?{printf("Hello\n");printf("World\n");}:{pr
浏览 4提问于2015-07-08得票数 4
5回答
我想要一个简单的if速记，检查一个数组是否有一个特定的键，如果有，就取消设置它。
$test = array("hi" => "123");
isset($test["hi"]) ? unset($test["hi"]);
为什么会出现解析错误？正确的语法是什么？
浏览 3提问于2011-06-20得票数 2
回答已采纳
我目前在我的表单中使用了以下代码：
{{ $errors->has('email') ? ' has-error' : '' }}
我试着把它改成这样：
{{ $errors->has('email') ?: ' has-error' }}
但现在，即使没有错误，类也会被添加。为什么会发生这种情况？只是好奇而已。
浏览 19提问于2017-06-18得票数 2
回答已采纳
8回答
为什么我们不能在C中的三元运算符中使用return关键字，如下所示：
sum > 0 ? return 1 : return 0;
浏览 3提问于2010-08-25得票数 26
回答已采纳
我已经将我的React链接到Firebase的实时数据库，并成功地获取字符串值并在我的webapp上显示它。
但是当涉及到布尔值时，我无法在webapp界面上显示它们。虽然我成功地获取了数据，并且可以在控制台日志中看到接收到的对象。
export default class Webapp extends Component {
constructor(){
super()
this.state ={
bloodConnect:'',
}
}
componentWillMount=()=> {
const roo
浏览 0提问于2019-06-29得票数 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
回答已采纳
我正在尝试使用带有布尔属性的三元运算符
app.js如下：
import React from 'react';
import HouseFull from './HouseFull';
function App() {
return (
<div>
<h1> Hello2 </h1>
<HouseFull hasOpening="{false}" />
</div>
);
}
react组件如下所示
import React,
浏览 0提问于2020-10-22得票数 0
5回答
我为什么能这么做？
if (integerList.Direction == "ascending") {
integerList.Integers.OrderBy(i => i.IntegerValue);
} else{
integerList.Integers.OrderByDescending(i => i.IntegerValue);
}
但不是这个？
integerList.Direction == "ascending" ? integerList.Integers.OrderBy(i => i.IntegerV
浏览 2提问于2013-10-03得票数 1
回答已采纳
2回答
这是在PHP7.4上测试的。
我试图理解为什么第一个例子不像其他两个一样返回'hello‘。示例3与示例1是相同的，但三元被封装在括号中，但由于某种原因，示例3上的括号的存在给出了预期的结果。
示例2与示例1相同，但三元语法是使用速记返回测试值的，如果它验证并且没有封装在括号中，但返回的结果与预期的一样。
在我看来，所有三个示例都应该返回'hello‘，因为字符串'hello’is_set()和!null对吗？为什么在这种情况下它甚至会看到??的右侧呢？左边的通行证，应该还回去。对吗？我在这里错过了什么？
var_dump('hello' ?? '
浏览 8提问于2022-07-27得票数 0
回答已采纳
你好，我的问题是使用RSpec书中使用的注入方法来破解密码游戏。我在阅读和理解它在做什么时遇到了困难。我已经在；上阅读了该方法的解释，但它仍然不清楚。有没有人能开导一下新手？
1)在.inject后面传递的参数0是什么意思？范围内0..3的第一个索引点？
2)我看到count是累加器memo值，index是索引点，但是如何利用该块并将其绑定到下一行代码中？
3)为什么使用三元运算符？
有问题的代码片段：
def exact_match_count(guess)
(0..3).inject(0) do |count, index|
count + (exact_match?(gues
浏览 1提问于2013-12-12得票数 0
3回答
嗨，我是第一次使用react.js构建一个单页面应用程序，我在语法方面遇到了很大的困难。我只想在用户登录后将登录按钮更改为注销按钮。我哪里错了？
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
if (isLoggedIn) {
<div className="authentication">
<button>Logout</button>
</div>
} else {
<
浏览 1提问于2020-03-07得票数 2
当我这样做的时候：
$foo = (1 === 1) ? 'one' : 'not one';
但是，下面的表达式给出了错误：
public static $relationsData = [
'tasks' => (Module::isEnabled('Task')) ? [self::HAS_MANY, Task::class, 'foreignKey' => 'created_by'] : [],
];
浏览 0提问于2017-02-16得票数 0
为了模仿Javascript，我在PHP中尝试了一下：
$what == '3' ? ( $tot1 += $sum ; $nLinesProd++ ; )
: ( $tot2 += $sum ; $nLinesExp++; ) ;
我也尝试了{}而不是()。这两种方法都不起作用。
有没有一种方法可以像在Javascript中一样使用三元运算符？
浏览 2提问于2017-02-16得票数 0
我正在尝试制作一个个人应用程序，我遇到了一些与请求有关的问题，与API无关。 请求的结果返回JSON：https://pastebin.com/raw/vpdq2k6S 我的代码： class Home extends Component {
componentDidMount() {
this.props.getTrending();
}
render() {
const { trending } = this.props.trending;
console.log(trending);
const Card = (props) => (
浏览 24提问于2020-10-30得票数 0
回答已采纳
我想显示ItemName，如果是ItemDeliveryStatus==1，则显示已禁用的TextInput，否则在地图函数react- TextInput内显示可编辑的TextInput
const [arrayList, setArraylist] = useState([
{ id: 0, ItemName: 'A', ItemDeliveryStatus:1 },
{ id: 1, , ItemName: 'B', ItemDeliveryStatus:1 },
{ id: 2, ItemName:
浏览 3提问于2021-07-08得票数 1
我的父组件，基本上是一个表单，有一个子组件，一个带有加载程序的覆盖，它只需要根据父级的状态来显示。
import React from 'react';
import Overlay from './overlay';
export default class RegisterForm extends React.Component {
constructor {
this.state = {
loading: false
};
}
handleSubmit(){
this.state.loading = tru
浏览 6提问于2016-09-26得票数 2
回答已采纳
2回答
使用?:条件运算符和使用||逻辑OR之间有什么区别。
我发现我的代码可以与以下代码一起工作：
$screenpixelratio = !empty($_COOKIE['screenpixelratio']) || $_COOKIE['screenpixelratio'] || $fallback_pixelratio;
但不是：
$screenpixelratio = !empty($_COOKIE['screenpixelratio']) ? $_COOKIE['screenpixelratio'] : $fallback_pi
浏览 3提问于2013-02-15得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
