JSX

1.JSX嵌入表达式

目标:掌握JSX中使用嵌入表达式

JSX是React中用来构建用户界面的手段,所以在JSX中嵌入表达式就是要将表达式所产生的值渲染到用户的界面中.

表达式就是一个能够产生结果的式子,就是说代码执行后一定会产生一个值作为结果。

 10
 'a'
 3 + 4
 10 > 100
 const a = 10
 "abc".split('')
 ['a','b','c'].join('_')
 function fn() {}

在JSX中使用一对花括号{}嵌入表达式产生的值

 //插入文本内容
 const name = "张三";
 //在react中是使用{}代表插值而不是跟vue一样双花括号{{}}
 const jsx = <div>Hello,{name}</div>

使用属性进行插入(记得在react中都是使用className代替class)

 const activeName = "active";
 const jsx = <input type="text" className={activeName} />

执行计算

 const x = 10;
 const y = 20;
 const paragraph = <p>{x * y}</p>

渲染函数返回值

 function getValue() {
   return "some value from getValue function"
 }
 const text = <p>{getValue()}</p>

JSX表达式

 const isError = true;
 const jsx = isError ? <div>发生了未知错误</div> : null

插入对象

 const other = <div style={{width:200,height:200,backgroundColor:"black"}}></div>

[⚠️] 请记住多单词需要使用小驼峰命名法,而且{{}} 代表的是插值表达式包裹对象{{}}

JSX中使用注释

 const element = (
   <>
     {/* 头部 */}
     <header>头部</header>
     {/* 身体 */}
     <body>身体</body>
     {/* 底部 */}
     <footer>底部</footer>
   </>
 )

非表达式是不能被嵌入JSX

 //错误🙅•♂️示范
 const jsx = <div>{ if(){} }</div>

[Attention] 就是在JSX中，这些什么true ｜ false ｜ null 是不会被渲染成具体内容展示的

2.JSX条件渲染

目标:掌握在JSX中使用分支语句,三元运算,逻辑运算进行条件渲染(根据条件决定渲染什么内容)

使用 if 分支语句进行条件渲染

 //数据是否正在加载的标识
 const isLoading = false
 //获取数据
 function getContent() {
   if(isLoading) {
     return <span>数据加载中...</span>
   }else {
     return <span>我是数据</span>
   }
 }
 //jsx不能使用if语句,但是js中可以。
 const jsx = <div>{getContent()}</div>

使用三元运算符进行条件渲染

 //数据是否加载
 const isLoading = false;
 //根据条件决定渲染什么内容
 const jsx = isLoading ? <span>数据加载中...</span> : <span>我是数据</span>

使用逻辑与运算符进行条件渲染

 //review一下逻辑与运算符
 // 在逻辑与表达式中只要有一个运算式返回假, 整个表达式返回假, 所有的运算式都返回真, 整个表达式返回真
 true && false      // false
 true && true       // true
 false && false     // false
 false && true      // false
 
 // 逻辑运算符常见误区: 只要是逻辑表达式一定返回布尔值, 这是错误的
 // 在逻辑与表达式中如果有运算式的返回结果转换为布尔值为假, 表达式的返回值就为该运算式的返回值
 '' && 1    // ''
 'a' && 0   // 0
 // 在逻辑与表达式中如果所有运算式的返回结果转换为布尔值都为假, 表达式的返回值为第一个运算式的返回值
 '' && 0    // ''
 // 在逻辑与表达式中如果所有运算式的返回结果转换为布尔值都为真, 表达式的返回值为最后一个运算式的返回值
 'a' && 1   // 1

 //数据是否正在加载的标识
 const isLoading = false;
 //如果 isLoading为false,短路
 const jsx = isLoading && <span>数据加载中</span>

3.总结

如果想要在JSX输出对象,需要将对象转换成字符串,使用JSON.stringify方法{JSON.stringfiy({name:"张三"})}
表达式就是能够产生一个结果的式子,就是代码执行后产生一个值为结果
使用插值语法{}代表嵌入式表达式
在应用构建时, JSX会被编译成为 React.createElement方法的调用或_jsx方法的调用,这两个方法执行后都会产生值,都返回虚拟DOM对象,使用jsx本身也是表达式,JSX就可以赋值给变量,可以作为函数的参数可以作为函数的返回值
在JSX中,布尔值,null,undefined渲染结果都为空,所以渲染结果就是什么都没有
JSX中有四种渲染表达方式
- if条件判断
- 三元运算符
- 逻辑与运算符
- switch case

React中使用JSX 系列2

JSX

1.JSX嵌入表达式

2.JSX条件渲染

3.总结