JSX简介
JSX是JavaScript的预发扩展。推荐在React中使用JSX来描述用户界面。
1.在JSX中使用表达式
在JSX中可以任意使用JavaScript表达式，需要放在大括号中{}.
比如像运算 2+2，对象获取属性user.firstName以及调用JavaScript函数formatName(user)都可以作为表达式在JSX中使用。
例如：
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
在这段代码中，真正的JSX部分是最后的两段代码，其中ReactDOM.render是将定义的内容通过ReactDOM渲染成html的DOM。element的定义是使用了表达式，看到调用JavaScript函数formatName的时候在外层加上了大括号{}。
上边的两段代码就是我们平常写的JavaScript代码，第一段是函数，第二段是对象定义。
可以看到，element元素在定义的时候，在外层加上了小括号()，其实不加也可以。不过推荐加上小括号，这样可以防止分号自动插入的bug。也就是说在element定义的时候也可以如下的(亲测可以)：
const element = <h1>Hello, {formatName(user)}</h1>
这里看到很像html或者xml语法，元素的闭合性也需要注意。
2.JSX本身也是一种表达式
JSX本身也是一种表达式，JSX最终会结果React编译，转换成普通的JavaScript对象。那么这也就意味着，在JavaScript的语法中比如if或者for语句块中使用JSX，或者将JSX赋值给变量，或者当做函数的参数传入，当做返回值。
如下边的代码:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
3.JSX属性
你可以使用引号来定义以字符串为值的属性
const element = <div tabIndex="0"></div>;
也可以使用大括号来定义以 JavaScript 表达式为值的属性
const element = (<img src={user.avatarUrl} />);
切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。
4.JSX嵌套
如果JSX标签是闭合的，那么在结尾处需要使用 />，就像XML和HTML一样。
const element = <img src="http://www.baidu.com" />
JSX标签也可以嵌套，就是类似在定义XML/HTML标签的时候，也是可以嵌套的。
const element = (
<div>
<h1>hello world!</h1>
<h2>good to see you here</h2>
</div>
);
如前面所说，不用加小括号()也是可以的,可以测试：
const element =
<div>
<h1>hello world!</h1>
<h2>good to see you here</h2>
</div>
;
但是需要注意的是，如前面所说的元素的闭合性，如下的代码是有问题的：
const element = (
<h1>hello world!</h1>
<h2>good to see you here</h2>
);
image.png
此时虽然用括号括起来了，作用一个JSX元素，但是标签并不是闭合的，开头是以
<h1>开始，那么React认为是结尾应该以</h1>结束，但是这里却是</h2>结束。
网友评论