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。
沒有留言:
張貼留言