iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

React鐵人先爆了再說系列 第 5

[05] 元件(Component)

元件(Component)

前面的文章裡面,有提到 元件 這個詞,也就是所謂的 Component,元件在 React 中是最基本也是最重要的單元,今天就更加深入了解一下。

這邊新增一個 TextShow.js 檔案,把昨天TextInput裡的顯示文字的部分,單獨抽離出來做成一個元件,要注意的是元件開頭第一個字母一定要大寫,不然會出錯。

一般 React 元件撰寫有主要兩種方式:

Class元件

import React, {Component} from 'react'

// 注意元件開頭第一個字母都要大寫
class TextShow extends React.Component {
    // render()是Class元件必須的
    render() {

        return <h1>{this.props.text}</h1>
        
      }
}
// 匯出TextShow模組
export default TextShow
  • Class元件不能沒有render(),是唯一必要的方法

Functional元件

import React from 'react'

// 注意元件開頭第一個字母都要大寫
const TextShow = (props) => (
    <h1>{props.text}</h1>
)

// 匯出TextShow模組
export default TextShow
  • 沒有自己內部狀態的元件可以使用 Functional元件的方式,這樣可以獲得比較好的效能

屬性(Props)

TextShow元件裡的最後部分

<h1>{this.props.text}</h1>

前面文章也有提到過這是JSX語法,是一種可以讓HTML標記直接寫在JavaScript程式碼中的擴充語法,大括號{}裡面就是JavaScript的程式碼。

在React元件中使用Props傳遞數值,是可以自定義變數傳入元件中的 {this.props.參數名稱},這邊定義TextShow為外部元件然後在父元件TextInput中去調用它並動態給值(後面會說明)。

Functional元件這邊 props 是傳入function的參數,因此取用 props 不用加 this。

  • 元件不能改變自己的props,只有它的父元件可以做這件事。

今天這些就是一個簡單的元件(Component)的組成。


上一篇
[04] TextInput使用
下一篇
[06] 屬性(Props) & 狀態(State)
系列文
React鐵人先爆了再說8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言