React Props – React 白話文運動 09

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 差異

  1. React element 在 JSX 中,是由 HTML element 及 JavaScript 構成的。
  2. Component 是函式宣告或是類別宣告中的回傳值。
  3. 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白話文運動10-React Props

React 白話文運動系列

建立React專案 – React 白話文運動 08

Babel & Webpack & NPM – React 白話文運動 07

React JSX – React 白話文運動 06

React 運作原理 – React 白話文運動 05

JavaScript 高階函式 – React 白話文運動 04

JavaScript Async Await – React 白話文運動 03

JavaScript ES6 Object – React 白話文運動 02

JavaScript ES6 – React 白話文運動 01

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

zh_TW繁體中文