Introducing JSX
JSX中插入表达式
function formatName(user) {
return user.firstName+' '+user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
}
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
JSX同样也是表达式
JSX也同样是JavaScript表达式,所以JSX可以被当做是返回值被return掉
if (user.name) {
return <p>This man's name is {user.name}</p>;
} else {
return <p>THis man has no name</p>;
}
使用JSX来为元素指定属性
JSX可以对DOM元素设置属性,包括字符串或者是变量。
const a = (
<h1 className={className} link="www.baidu.com">
Title
</h1>
)
使用JSX来指定子元素
JSX可以包含子元素,并且JSX在DOM语法上更接近JavaScript,其使用CamelCase来表示元素属性,比如class在这里就是className、tabindex就是tabIndex。
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
)
JSX代替对象
Babel会将JSX编译为React.createElement()
对象,这个对象可以用来创建一个DOM元素。
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);