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