Skip to main content

JSX语法

JSX是一个 JavaScript 的语法扩展。实际上,JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。如下 JSX 代码:

<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>

会编译为:

React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)

如果没有子节点,你还可以使用自闭合的标签形式,如:

<div className="sidebar" />

会编译为:

React.createElement(
'div',
{className: 'sidebar'}
)

简单示例

const h1 = <h1>Hello, world!</h1>

嵌入表达式

const name = 'Tom'
const h1 = <h1>Hello, {name}</h1>

ReactDOM.render(
h1,
document.getElementById('root')
)

使用函数

function formatName(user) {
return user.firstName + ' ' + user.lastName
}

const user = {
firstName: 'Donald',
lastName: 'Tom'
}

const h1 = (
<h1>
Hello, {formatName(user)}!
</h1>
)

ReactDOM.render(
h1,
document.getElementById('root')
)

条件渲染

function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>
}
return <h1>Hello, Stranger.</h1>
}

逻辑于(Boolean类型)

function Example() {
const isShowName = true
return (
<div>
<p>你好,{isShowName && <strong>张三</strong>}</p>
</div>
)
}

列表&Key

key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

const numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
)
注意

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。

特定属性

const img = <img src={user.avatarUrl} />

子元素

const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
)

表示对象

以下两种示例代码完全等效:

const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
)

React.createElement() 会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象:

// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
}

Fragments片断

定义:

class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
)
}
}

使用:

class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
)
}
}

解析:这样可以正确的输出 <Table />

Live Editor
Result
Loading...

短语法

class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
)
}
}

加key

注意

使用短语法 <></> 是不支持加 key 的,要加 key 需要使用 React.Fragment 方式

class Columns extends React.Component {
render() {
return (
[1,2,3].map((val, index) => {
return (
<React.Fragment key={index}>
<td>Hello</td>
<td>World</td>
</React.Fragment>
)
})
)
}
}