JSX语法特点

JSX语法简介

文章目录

    • JSX语法简介
      • 一.简介
      • 二.语法
        • 1.优点
        • 2.语法特点
          • 1.单个根元素
          • 2.单标签一定要闭合
          • 3.img标签必须添加alt属性
          • 4.标签都是小写字母,组件都是首字母大写
          • 5.class需要写成className
          • 6.for需要写成htmlFor
        • 3.jsx注释
          • 1.单行注释
          • 2.多行注释
        • 4.react中的插值表达式
        • 5.html内容转义 dangerouslySetInnerHTML
        • 6.属性表达式
        • 7.Boolean属性
        • 8.条件运算符

一.简介

它是由React官方推出的一种基于JavaScript的拓展语法,可以在JavaScript中编写更像XML写法的代码,虽然不是使用React编写代码的必要条件,但是官方推荐,因为它更直观,更搞笑的可读性.需要注意的是,它不能在浏览器中执行,需要经过转换器将JSX语法转为JS之后才可以.

二.语法

1.优点

要使用一个东西,我们需要知道它有什么优点,能给我们带来什么?

  • JSX执行更快,因为它在编译为JavaScript代码后进行了优化
  • 它是类型安全的,在编译过程中就能发现错误
  • 使用JSX编写模版更简单快捷

2.语法特点

1.单个根元素

定义标签时,最外层只允许有一个标签

ReactDOM.render(
    // 

使用webpack方式使用React

, //jsx语法
<div> <h1>jsx</h1> </div> <div> </div>, document.getElementById('root') );

这样的写法,程序会直接报错,无法通过编译

2.单标签一定要闭合

在JSX语法内的标签,一定要闭合,形如:

3.img标签必须添加alt属性

img标签需要加上alt属性, 有的装了某些插件,会检测到语法错误,有的不会

4.标签都是小写字母,组件都是首字母大写
5.class需要写成className

因为JSX的特性接近JavaScript而非HTML,所以ReactDOM使用小驼峰命名(classValue)来定义属性名.例如class应该写成className

class是JavaScript中的关键字,为了区别,需要写成className

<div className="box"></div>
6.for需要写成htmlFor

for是JavaScript中的关键字,会当做for循环

<label htmlFor="username"></label>
<input type="text" id="username"/>

3.jsx注释

1.单行注释
 {/* 
*/
}

使用 {/* */}

2.多行注释
{/* 
    
    
    
*/
}

也是使用使用 {/* */}只不过变成了多行

4.react中的插值表达式

  • vue中表示插值表达式的语法是双大括号{{ }}
  • react中表示插值表达式的语法是单个大括号 {}
let msg="hello world";

<h1>{msg}</h1>

注意:{ '' } | { false } | {null} | {undefined}都不会渲染任何内容

5.html内容转义 dangerouslySetInnerHTML

就是将html的内容转义,相当于vue中的v-html

这种操作是比较危险的,因为会引来XSS攻击

let msg = "

hello world

"
; <h1 dangerouslySetInnerHTML={{ __html: msg }}></h1>

6.属性表达式

JSX中支持动态设置属性值 用单大括号{}表示

let imgsrc = 'http://localhost:3000/upload';

<img src={imgsrc} alt="" />

插值表达式中,也可以是函数

function getImgsrc(){
    return  'http://localhost:3000/upload';
}

<img src={getImgsrc()} alt="" />

7.Boolean属性

Boolean属性值,在JSX语法中默认为true,要识别为false需要使用{},这类标签常出现在表单元素中,如dispable checkedreadOnly

等价于 但是要让checked设置为false,需要这么写

8.条件运算符

使用{}可以做条件判断,但是不能有复杂的逻辑,只能写表达式

{
    true ? <span></span> : <span></span>
}

你可能感兴趣的:(React)