React使用JSX進行模板化,而不是使用普通的JavaScript。因為沒有必要使用Javascript,但是,下面是一些它的利弊。
在大多數(shù)情況下,JSX看起來像一個普通的HTML。 我們已經(jīng)在“開發(fā)環(huán)境設置”一章中使用了它。 下面來看看App.jsx中返回div
的代碼。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
盡管它與HTML很相似,但在處理JSX時還需要記住一些事項。
如果想返回更多的元素,需要用一個容器元素來包裝它。注意這里我們如何使用div
作為h1
,h2
和p
元素的包裝。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header h1</h1>
<h2>Content h2</h2>
<p>This is the content ~ </p>
</div>
);
}
}
export default App;
運行上面示例代碼,得到以下結果 -
除了常規(guī)的HTML屬性外,還可以使用自己的自定義屬性。 當想要添加自定義屬性時,需要使用數(shù)據(jù)前綴。在下面的例子中,我們添加了data-myattribute
作為p
元素的一個屬性。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header h1</h1>
<h2>Content h2</h2>
<p data-myattribute = "somevalue">This is the content ~ </p>
</div>
);
}
}
export default App;
JavaScript表達式可以在JSX中使用。只需要用大括號{}
來包裝它。 以下示例將呈現(xiàn)數(shù)字:2
。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>結果值為:{1+1}</h1>
</div>
);
}
}
export default App;
執(zhí)行上面示例代碼,得到以下結果 -
不能在JSX中使用if else
語句,而是使用條件(三元)表達式。 在下面的例子中,變量i
等于1
,所以瀏覽器將呈現(xiàn)為真,如果將其更改為其他值,它將呈現(xiàn)false
。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}
export default App;
執(zhí)行上面示例代碼,得到以下結果 -
React建議使用內聯(lián)樣式。當想要設置內聯(lián)樣式時,需要使用駝峰(camelCase
)語法。 React還會在特定元素的數(shù)值后自動附加px
。以下示例顯示如何將myStyle
內聯(lián)添加到h1
元素。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 40,
color: 'green'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
export default App;
執(zhí)行上面示例代碼,得到以下結果 -
在寫注釋時,我們需要在想要在標簽的子部分寫注釋的時候放上大括號{}
。 在編寫注釋時總是使用{}
是一個好習慣,因為我們希望在編寫應用程序時保持一致。如下代碼所示 -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}
export default App;
HTML標簽總是使用小寫的標簽名稱,而React組件以大寫字母開頭。
注意 - 應該使用
className
和htmlFor
作為XML屬性名稱,而不是class
和for
。
這在React官方頁面上解釋為 -
由于JSX是JavaScript,所以不鼓勵使用類和標識符等標識符作為XML屬性名稱。 React DOM組件期望使用DOM屬性名稱,例如className
和htmlFor
。