JSX语法特点

JSX语法简介

一.简介

它是由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 checked和readOnly等

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

8.条件运算符

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

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