JSX的使用注意点

348 阅读1分钟
1 必须在脚手架环境或者webpack环境下使用

浏览器本身是不识别jsx的 需要经过babel的转换才能渲染到页面上

2 React必须导入

jsx的本质实际上还是使用React.createElemenrt去创建元素 所以它始终是使用了React

3 jsx必须有一个根节点

第一种 可以使用一个空 div 来包裹
const element =( 
 <div>  
<div>1</div> 
<div>2</div> 
 </div>
)

预览:

第二种 可以使用一个空 <> 来包裹
const element =( 
 <> 
 <div>1</div> 
 <div>2</div> 
 </>
)

预览:

4 jsx与js更相似 而不是html

class ==> className    类名的书写方式

for ==> htmlFor   

5 jsx里单标签必须使用闭合
<hr></hr>
<hr />
6 jsx里可以随意换行

当有多行jsx的时候 建议换行书写 提高阅读性

使用()包裹一段jsx结构