iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

看初心者怎麼學React系列 第 8

Day8 撰寫JSX

在JSX中嵌入javascript表達式

,要使用在JSX中用大括號{}將包javascript表達式包起來就可以使用了。

在大括號{ }中可以使用:

  • javascript表達式,計算過得到的
  • 變數或常數
  • 陣列值
  • 回呼函式
  • 三元運算子
  • /.../註解

等等...

function greeting(){
	return 'Hello'
};
const name = 'Amy';


function App() {
  return (
  <h1>
    {greeting()+ ','+name}
  </h1>
)};

https://ithelp.ithome.com.tw/upload/images/20210923/20140303cES5yMpAt9.png

在 JSX 中使用 三元運算子

因為只能使用 JavaScript表達式,所以在 JSX 無法使用 if (if 是一個陳述式) ,但是可以使用 JavaScript 三元運算子。

function App() {
  return (
  <a>{data.login?'登出':'登入'}</a>
)};

JSX 本身也是 Javascript 表達式

在編譯之後,JSX轉換成一個function返回的Javascript的物件形式(請參考第七天的文章)。

可以在function裡的if 跟 for 迴圈中使用 JSX,可以在JSX中使用function傳入的參數。

function getName(name) {
  if (name {
    return <h1>Hello, {name}!</h1>;
  }
  return <h1>Hello, admin.</h1>;
}

JSX的標籤

React可以使用html標籤和React自定的元件標籤

html標籤使用英文小寫字做為開頭

const element =<div>Hello!</div>

自訂元件標籤使用英文大寫字做為開頭(可使用大駝峰寫法)

const element =<MyComponent>Hello!</MyComponent>

JSX 的屬性

跟 HTML 一樣 JSX 的 tag 可以有屬性:

可以使用引號,引號裡面的屬性值的型態是字串

const element = <img src="image/image.jpg" />;

也可以透過 { } 使用javascript給予不同型態的動態屬性值:

const element = <img src={webImage.Url} />

因為 JSX 是 JavaScript,所以React元素的屬性名稱也是按照 JavaScript 原生的語法中的className去定義屬性。而 for 則是要用 htmlFor。

例如:

const element = <h1 className="title">Hello, world!</h1>;

JSX的子元素(Children)

在 JSX 包含開始與結束標籤的情形下,夾在兩者之間的內容為children,我們可以靠children傳遞狀態( prop)到元件之中。在後面文章會詳細說明React的prop傳遞。

Children的類型有很多種:

JavaScript 表達式、字串、Functions、另一個元件都能是Children。

const element = 
<MyComponent> 
'標籤裡面的都稱為Children'
</MyComponent>

如果標籤內為空,要用 /> 關閉這個標籤

const element = <img src={webImage.Url} />


JSX語法中只能有一個根元素

多個元素的情況下會造成無法編譯為React.createElement的形式

需要把子元素包在一個根元素下面,像下面範例中最外層的 <div></div>

//錯誤
function App() {
  return (
  <h1>標題</h1>
	<p>內文</p>
)};

//必須有根元素
function App() {
  return (
	<div>
		  <h1>標題</h1>
			<p>內文</p>
	</div>
)};

從 React 16 起,新增了 Fragment 的功能,讓你不需要在 DOM 中增加這個額外節點了:

function App() {
  return (
	<>
		  <h1>標題</h1>
			<p>內文</p>
	</>
)};

上一篇
Day7 什麼是JSX?
下一篇
Day9 渲染元件
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言