JSX语法入门学习
1、特点
- JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;
- 更加语义化, 更加直观, 代码可读性更高;
- 性能相对原生方式更加好一些!
2、示例
a. 多重标签嵌套
ReactDOM.render(
<div>
<h2>多层标签嵌套</h2>
<img src="img/logo.jpg"/>
<p>测试</p>
</div>
,document.getElementById('app'))
b. js中的变量, 表达式要写在{}内
ReactDOM.render(
<div>
<p>600+1414/2+46/5 = {600+1414/2+46/5}</p>
</div>,
document.getElementById('app'));
c. 内联样式通过对象方式引入
const myStyle = {
background:'purple',
color:'yellow',
fontSize:30
}
ReactDOM.render(
<div>
<h2>给你点颜色看看</h2>
<div style={myStyle}>颜色来了</div>
</div>,
document.getElementById('app'))
d. 数组遍历
//声明数组
const dataArr = [
{name:'孙悟空', power:'2000'},
{name:'凯', power:'2500'},
{name:'亚瑟', power:'1800'},
{name:'牛魔', power:'1000'}
];
//2、创建虚拟DOM
const vDOM = (<ul>
{
dataArr.map((data, index) =>
<li key={index}>{index + 1}
------- {data.name}
-------- 战力:{data.power}</li>
)
}
</ul>);
//3、将虚拟DOM渲染到页面元素上
ReactDOM.render( vDOM,document.getElementById('app'));
3、注意问题
- JSX中添加属性时,使用 className 代替 class , 像label中的for属性,使用htmlFor代替;
- JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
- JSX语法中,标签必须成对出现,如果是单标签,则必须自闭合;
- 在 JSX 中可以直接使用 JS代码,直接在 JSX 中通过 {} 中间写 JS代码即可;
- 在 JSX 中只能使用表达式,不能出现语句;
- 在 JSX 中注释语法:{/* 中间是注释的内容 */}