JSX基础介绍
先看看一个最简单的例子:
const element = <h1>Hello, world!</h1>;
上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JSX描述一个UI是什么样子的,就好像HTML告诉浏览器我们看到的页面是什么样子。最开始接触JSX时会感觉它很像一种模板语言,但是除了提供模板能力之外,他拥有JavaScript所有的能力。
JSX用于产生React的组件,JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。我们先看下面这个例子:
function formatName(user) {
//将参数合并成一个srting
return user.firstName + ' ' + user.lastName;
}
//创建user对象
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
//创建element对象,并用JSX语法标识为一个html内容。
//h1标签中会包含方法计算之后的内容
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
这个例子将JSX语法分成了很多部分,element就是一个HTML的JSX表达式,HTML标签最好使用一组()括号包裹起来以避免分号导致的问题(分号可能会在编译时成为HTML内容的一部分)。ReactDOM是一个react工具,用于提供Dom渲染功能。ReactDOM.render 方法接受2个参数,一个是要渲染的JSX元素,另外一个是Dom对象,render会在这个Dom对象中添加由JSX定义的HTML。
JSX是一种丰富的表达式,他可以随意嵌套JavaScript和HTML使用,例如if、for等等,比如: