React Props – React 白話文運動 09
前言
建立React專案 – React 白話文運動 08 介紹如何建立一個 React 專案：建置環境、建置專案、啟動專案。
這一篇則會針對 React 語法進一步做講解， React JSX – React 白話文運動 06 學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念，包含了：React 元件宣告、React Props。
React 元件宣告
在這邊先講解一下 React 元件的語法以及宣告，先使用前篇 JSX 文章中的語法來講解。
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
用以上的程式碼可以知道，首先宣告了一個元件叫做 myElement，並且在 root 做渲染。不過除了在一個檔案中進行渲染以外，也可以從另一個檔案中載入已寫好的元件。
因此先重新針對以上檔案做一下修改，檔名命名為 app.js。另外宣告了一個元件叫做 fruit.jsx，這邊也進行兩種宣告。
app.js
import React, { Component } from 'react';
import Fruit from './fruits';
class App extends Component {
render() {
return (
<div className="App">
<ul>
<Fruit fruit_name="banana"/>
<Fruit fruit_name="apple"/>
</ul>
</div>
);
}
}
export default App;
fruits.jsx
函式宣告
import React from 'react';
const Fruit = (props) => {
return <p> this is {props.fruit_name}.</p>
}
export default Fruit;
類別宣告
import React from 'react';
class Fruit extends React.Component {
render() {
return (
<p> this is {this.props.fruit_name}.</p>
);
}
}
export default Fruit;
以上兩種宣告方式皆可以傳入 props，不過現在主流還是直接使用函式宣告，寫法相對簡潔。
React Components、 Component instance、 Elements 差異
- React element 在 JSX 中，是由 HTML element 及 JavaScript 構成的。
- Component 是函式宣告或是類別宣告中的回傳值。
- Component instance 則是 Component 的實例。
import React, { Component } from 'react';
const Fruit = (props) => { // Fruit() 為component
return <p> this is {props.fruit_name}.</p> // <p></p> 裡面的為element
}
const banana = <Fruit fruit_name="banana" /> // banana 為元件的實例 component instance
class App extends Component {
render() {
return (
<div className="App">
<ul>
{banana}
<Fruit fruit_name="apple" />
</ul>
</div>
);
}
}
export default App;
React Props
在父元件以及子元件中，如果要傳遞參數值，類似函數中的引數（argument）概念的話，可以使用 props 做傳遞。不過函數宣告的元件以及類別宣告的元件還是會有些許的不同。
函數宣告
可以發現函數宣告類似於引數，因此外部元件做使用時，只要使用參數的方式就可以傳入，而函式元件本身只要使用 props.[變數名稱] 就可以傳入。
import React from 'react';
const Fruit = (props) => {
return <p> this is {props.fruit_name}.</p>
}
export default Fruit;
類別宣告
類別本身是物件導向程式語言會有的概念，一個類別中會有屬於自己的變數，並且透過 { this.props.[變數名稱]} 來去做 props 的傳入。
import React from 'react';
class Fruit extends React.Component {
render() {
return (
<p> this is {this.props.fruit_name}.</p>
);
}
}
export default Fruit;
結語
本篇文章除了講解了 React props 參數傳遞的概念以外，也講解了不同方式的元件宣告。
另外也講解了，React Components、 Component instance、 Elements 差異。
希望以上的內容可以對讀者有幫助。
如果有任何建議與疑問也歡迎留言！
引用
React 白話文運動系列
Babel & Webpack & NPM – React 白話文運動 07
JavaScript 高階函式 – React 白話文運動 04
JavaScript Async Await – React 白話文運動 03
JavaScript ES6 Object – React 白話文運動 02
JavaScript ES6 – React 白話文運動 01
你可能也想看
