React官方文档--Introducing JSX

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!'
);