JSX语法特点

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>
}

JSX语法简介

文章目录

一.简介

二.语法

1.优点

2.语法特点

1.单个根元素