PJCHENder 未整理筆記

[React] JSX 元素

2018-08-24

[React] JSX 元素

@(React)[React]

  • JSX 元素的最外層,必須只能有一個根元件。
  • 在 JSX 中,所有自關閉標籤(self-closing tag)必須在最後加上 /,例如,<br />
  • 在 JSX 中,若要為元素代入樣式,需使用 className 屬性,例如,<div className="foobar">
  • 任何在 JSX 中的元素都會被視為 JSX,而非平常的 JavaScript,因此若在 JSX 元素中使用 JavaScript,會被當作字串直接輸出,若希望該段內容被當作 JavaScript 處理,需使用大括號 {} 包住。

代入 class 樣式

使用關鍵字 className

1
2
3
const container = (
<div className="container">Hello</div>
);

代入行內樣式(inline style)

使用 {{ }} 即可代入行內樣式,外面的大括號是一般在 React 中,用來告訴 JSX 這個部分裡面的內容是 JavaScript;第二個大括號比較的是物件所用的 { } ,所以實質上就是把一個物件代到 style 屬性內:

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';

const styleMe = <h1 style={{ background: 'lightblue', color: 'darkred' }}>Please style me! I am so bland!</h1>;

ReactDOM.render(
styleMe,
document.getElementById('app')
);

另一種常見的方式則是定義一個名為 style 的變數,然後再把它插入到 JSX 的元素中,由於使用的是 JavaScript 的模組,因此除非你在模組內把該變數匯出(export),否則同樣名稱的變數並不會衝突:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import ReactDOM from 'react-dom';

const styles = {
background: 'lightblue',
color: 'darkred',
fontSize: 20, // 等同於 20px
marginTop: '60px'
}

const styleMe = <h1 style={styles}>Please style me! I am so bland!</h1>;

ReactDOM.render(
styleMe,
document.getElementById('app')
);

在 React 中,多數的樣式如果沒有點寫單位,預設會自己幫你帶 px,完整支援的清單可在這裡檢視

代入 JavaScript 表達式

使用大括號 { }

1
2
3
const containerWithJS = (
<h1>2 + 3 = {2 + 3}</h1>
)

代入屬性(attribute)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
};

const panda = (
<img
src={pics.panda}
alt="Lazy Panda" />
);

const owl = (
<img
src={pics.owl}
alt="Unimpressed Owl" />
);

const owlCat = (
<img
src={pics.owlCat}
alt="Ghastly Abomination" />
);

綁定事件(event listener)

1
<img onClick={myFunc} />

要特別留意的是,在一般的 HTML 中綁定事件是全部以小寫表示(lowercase),像是 onclick, onmouseover;在 JSX 中,綁定事件是以小駝峰命名(camelCase),例如 onClickonMouseOver

Supported Events @ React

if … else … 條件式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let message;

if (user.age >= drinkingAge) {
message = (
<h1>
Hey, check out this alcoholic beverage!
</h1>
);
} else {
message = (
<h1>
Hey, check out these earrings I got at Claire's!
</h1>
);
}

ReactDOM.render(
message,
document.getElementById('app')
);

疊代元素

在 JSX 中有關鍵字 key 屬性(attribute),它就像 id 屬性一樣,需要是唯一的。

1
2
3
4
5
const strings = ['Home', 'Shop', 'About Me'];

const listItems = strings.map((string, i) => <li key={'list_' + i}>{string}</li>);

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('app'))

在 JSX 中,可以直接代入一個一個的 list,也可以直接代入一個 array:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// This is fine in JSX, not in an explicit array:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

// This is also fine!

const liArray = [
<li>item 1</li>,
<li>item 2<li>,
<li>item 3</li>
];

<ul>{liArray}</ul>

使用 React.createElement()

當 JSX 的元素被編譯過後,JSX 的元素會被轉換成在 React.createElement() 中的內容,每一個 JSX 元素其實都會呼叫 React.createElement() 這個方法:

1
2
// jsx
const h1 = <h1>Hello world</h1>;

被編譯成:

1
2
3
4
5
6
// jsx 會被編譯成這樣
const h1 = React.createElement(
"h1",
null,
"Hello, world"
);

React.createElement() @ React

使用 ReactDOM.render

1
2
3
4
5
6
7
// const container = <div className="container">Hello</div>;
const container = (
<div className="container">Hello</div>
);

const app = document.querySelector("#app");
ReactDOM.render(container, app)
1
2
const foobar = 'Hello React';
ReactDOM.render(<h1>{foobar}</h1>, document.getElementById('app'));

參考

Tags: React

掃描二維條碼,分享此文章