網頁

2021/7/20

React 建立組件 create component

React建立組件(Component)的方式如下。


範例環境:

  • React 17

本篇以「React 使用Create React App建立React應用程式」為基礎進行修改。


React的Component是由React elements組成、可供render的重複利用UI元件。Component名稱開頭必須大寫,又分為Function Component及Class Component,兩種定義方式如下。


Function Component

定義一個Function Component Hello,其實就是定義一個Hello(props)函式傳入props參數代表component的屬性值,返回React element表示要render的html樣貌。

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}

也可用ES6的箭頭函式語法。

const Hello = (props) => {
  return <h1>Hello, {props.name}!</h1>
}


Class Component

定義一個Class Component Hello,使用ES6的class定義Hello類別繼承(extends) React.Component,實作render()方法並返回React element物件。在Class Component可以this.props取得component的屬性值。

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>
  }
}

定義好的Component可在React中以類似DOM標籤的方式作為element使用,例如上面不論是Function Compoment或Class Component都可以<Hello />表示為物件使用。

下面在React應用程式的App.js定義Hello Function Component,並在App()中取得<Hello/>物件並返回。屬性name="John"可從props.name取得。

App.js

import React from 'react';
import './App.css';

function App() {
  const hello = <Hello name="John" />
  return hello
}

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}

export default App;

下面則改用Class Component的方式定義Hello component。屬性name="John"可透過this.props.name取得。

App.js

import React from 'react';
import './App.css';

function App() {
  const hello = <Hello name="John" />
  return hello
}

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>
  }
}

export default App;

上面兩種修改顯示相同的結果如下。




參考github


沒有留言:

張貼留言