JSX语法注意事项

JSX语法注意事项

1、使用dom类型标签时，标签首字母必须小写，

<h1>hello world<h1>

使用react组件时，组件名称首字母必须大写。

<HelloWorld/>

2、JSX中使用javascript表达式要用{}包起来。不能使用多行javascript语句。

//正确
<myComponent foo={1+2}>

//错误
<myComponent foo={const val=1+2,return val}>

//错误
let complete;
<div>
{ if(complete){ return "aa"} else{return "bb"}}
</div>

//正确 可使用三目运算符或逻辑与（&&）替换if/else
let complete;
<div>
{ complete?"aa":"bb"}
</div>

3、class要写成className，onclick要写成onClick.(事件属性名要采用驼峰格式)

<div className="foo" onClick={this.handleDelete}>
<div className="foo" onClick={()=>{console.log("aaa")}}>

4、JSX中注释需要用大括号{}将/**/包裹起来：

<div>
{/*这是一段注释*/}
</div>

5、使用style时需要使用两个{}，外面的{}表示它是一个js表达式，里面的{}表示它是js对象

<div style={{background:'red',width:'20px'}}></div>

6、为img的src属性赋值

1)import 方法

import imgURL from './../images/photo.png';
<img src={imgURL } />

2)require 方法

<img src={require('./../images/photo.png')} />

动态图片

//提前require好赋值给变量，再将变量赋值给src
const iconUrl = require('~/shared/assets/image/icon-document-tip-108-108.png')
<img className="icon" src={iconUrl} alt="" />