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