JSX语法简介
文章目录
一.简介
它是由React官方推出的一种基于JavaScript的拓展语法,可以在JavaScript中编写更像XML写法的代码,虽然不是使用React编写代码的必要条件,但是官方推荐,因为它更直观,更搞笑的可读性.需要注意的是,它不能在浏览器中执行,需要经过转换器将JSX语法转为JS之后才可以.
二.语法
1.优点
要使用一个东西,我们需要知道它有什么优点,能给我们带来什么?
- JSX执行更快,因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的,在编译过程中就能发现错误
- 使用JSX编写模版更简单快捷
2.语法特点
1.单个根元素
定义标签时,最外层只允许有一个标签
ReactDOM.render(
// <h1>使用webpack方式使用React</h1>, //jsx语法
<div>
<h1>jsx</h1>
</div>
<div>
</div>,
document.getElementById('root')
);
这样的写法,程序会直接报错,无法通过编译
2.单标签一定要闭合
在JSX语法内的标签,一定要闭合,形如:
<br/>
<img src="" alt=""/>
<input />
3.img标签必须添加alt属性
img标签需要加上alt属性,
<img src="" 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循环
扫描二维码关注公众号,回复: 11486548 查看本文章
<label htmlFor="username"></label>
<input type="text" id="username"/>
3.jsx注释
1.单行注释
{/* <div className="box"></div> */}
使用 {/* */}
2.多行注释
{/*
<label htmlFor="username"></label>
<input type="text" id="username"/>
<div className="box"></div>
*/}
也是使用使用 {/* */}
只不过变成了多行
4.react中的插值表达式
- vue中表示插值表达式的语法是双大括号
{{ }}
- react中表示插值表达式的语法是单个大括号
{}
let msg="hello world";
<h1>{msg}</h1>
注意:{ '' } | { false } | {null} | {undefined}
都不会渲染任何内容
5.html内容转义 dangerouslySetInnerHTML
就是将html的内容转义,相当于vue中的v-html
这种操作是比较危险的,因为会引来XSS攻击
let msg = "<h1>hello world</h1>";
<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
等
<checkbox checked/>
等价于<checkbox checked={true} />
但是要让checked设置为false,需要这么写
<checkbox checked={false} />
8.条件运算符
使用{}
可以做条件判断,但是不能有复杂的逻辑,只能写表达式
{
true ? <span>真</span> : <span>假</span>
}