- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在React中使用if 条件语句
## 语法
```jsx
{isLoading?'Loading':'NotLoading'}
```
# 实例
if条件语句无法像[[JSX 变量]]那样用花括号嵌入JSX元素中
```jsx
let message = (
<h1>
{
if (purchase.complete) {
'Thank you for placing an order!'
}
}
</h1>
);
// 报错
```
正确的写法是直接写if语句，不要嵌入[[JSX Elements]]元素中,设置一个`为空`的变量`message`，符合条件时存储至这个变量中。
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
let message;
if(user.age >= drinkingAge) {
message = (
<h1> 来看看这款酒精饮料！ </h1>
);
}else{
message = (
<h1> 来吃pizza！</h1>
);
};
render.root(message);
```
# 相关内容
## 三元运算符
如果使用三元运算符，则可以写成JSX元素的语法格式
```jsx
let message = (
<h1>
{user.age>=drinkingAge ? '来看看这款酒精饮料！' : '来吃pizza！'}
</h1>
);
render.root(message);
```
三元运算符中的变量不加花括号
```jsx
{authorized===true ? contactInfo : login}
```
- `contactInfo` 和`login`分别是 2 个变量
# 问题
写一个if条件，如果硬币为head，展示kitty图片，如果为tails，展示doggy图片。
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
function coinToss() {
// This function will randomly return either 'heads' or 'tails'.
return Math.random() < 0.5 ? 'heads' : 'tails';
}
const pics = {
kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};
let img;
```
用三元运算符格式
# 问题答案
```jsx
if(coinToss==='heads'){
img = <img src={pics.kitty} />;
}else{
img = <img src={pics.doggy} />;
}
render.root(img);
```
```jsx
// 三元运算符格式
let img = (
<img src={pics[coinToss==='heads'?'kitty':'doggy']} />
);
let img = coinToss() ? <img src={pics.kitty} /> : <img src={pics.doggy} />;
```
pics的写法是[[js objects 对象属性]]，`pics[]`是获取属性的另一种写法，`[]`中的属性值必须都包括在`''`单引号内。
# 参考资料
- [JSX Conditionals: If Statements That Do Work](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-advanced/exercises/jsx-conditionals-valid-if)