挑戰 React 第十一篇

什麼是 props

大家還記得我們前幾篇說過 React Component嗎？

Component 可為function Component or Class Component，它接收任意的參數又稱之為props並且回傳描述畫面的 React element。

因此 props 類似可以傳遞的東西，而這個東西是一個物件，我覺得用實作範例比較好懂，請看以下：

實作範例

目標

利用不同的 attribute value 在傳遞 props 給同一個組件，最後產生出不同結果。

一、事前準備

1. 先用語法糖創立一個專案

npx create-react-app "project-name"

2. 在 App.js 檔案裡的程式碼改成以下

import React from 'react';
import './App.css';
import Hi from './Hi';

function App() {
  return (
    <div className="App">
      <Hi />
    </div>
  );
}

export default App;

3. 因為 App.js 檔案引入 Hi Component，需創立一個 Hi.js 檔案並複製以下程式碼

import React, { Component} from 'react';

class Hi extends Component {
  render(){
    return <h1>Hi Tom</h1>
  }
}

export default Hi

4. yarn start 成果

二、開始學習 Props 實作

1. 在之前的文章我們學到組件可以重複利用，我們現在要製作三個 Hi Tom，因此複製三個 Hi 組件

function App() {
  return (
    <div className="App">
      <Hi />
      <Hi />
      <Hi />
    </div>
  );
}

2. 接著我們在 App function 傳遞給 Hi組件裡加上 attribute name

function App() {
  return (
    <div className="App">
      <Hi name="Tom"/>
      <Hi name="Imily"/>
      <Hi name="Afra"/>
    </div>
  );
}

3. console.log 出來傳遞的內容結果

class Hi extends Component {
  render(){
    console.log(this.props)
    return <h1>Hi Tom</h1>
  }
}

props 傳遞出來是物件，確認有 name 屬性

4. 把剛剛傳遞的 props.name 放到 element 裡

class Hi extends Component {
  render(){
    return <h1>Hi {this.props.name}</h1>
  }
}

5. yarn start 結果

依據不同的 attribute value ，達到我們要的目標效果

props 是唯讀的

程式碼範例

import React, { Component} from 'react';

class Hi extends Component {
  render(){
    this.props.name = 'modifyValue';
    return (
    <div>
      <h1>Hi {this.props.name}</h1>
    </div>)
  }
}

export default Hi

網頁出現 error

學習心得

我到這篇才真正懂 props 為何物，我一直以為 props 只限定於用 state 的時候把它轉換成 props，很多程式碼果然要靠實作才能理解發生什麼事，下篇要來學習 state 我自己是蠻期待的~~Fighting!!!