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