iT邦幫忙

0

了解 React Props 與簡單實作

挑戰 React 第十一篇

什麼是 props

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

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

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

實作範例

目標

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

一、事前準備

  1. 先用語法糖創立一個專案
npx create-react-app "project-name"
  1. 在 App.js 檔案裡的程式碼改成以下
import React from 'react';
import './App.css';
import Hi from './Hi';

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

export default App;
  1. 因為 App.js 檔案引入 Hi Component,需創立一個 Hi.js 檔案並複製以下程式碼
import React, { Component} from 'react';

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

export default Hi
  1. yarn start 成果

二、開始學習 Props 實作

  1. 在之前的文章我們學到組件可以重複利用,我們現在要製作三個 Hi Tom,因此複製三個 Hi 組件
function App() {
  return (
    <div className="App">
      <Hi />
      <Hi />
      <Hi />
    </div>
  );
}

  1. 接著我們在 App function 傳遞給 Hi組件裡加上 attribute name
function App() {
  return (
    <div className="App">
      <Hi name="Tom"/>
      <Hi name="Imily"/>
      <Hi name="Afra"/>
    </div>
  );
}
  1. console.log 出來傳遞的內容結果
class Hi extends Component {
  render(){
    console.log(this.props)
    return <h1>Hi Tom</h1>
  }
}

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

  1. 把剛剛傳遞的 props.name 放到 element 裡
class Hi extends Component {
  render(){
    return <h1>Hi {this.props.name}</h1>
  }
}
  1. 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!!!


尚未有邦友留言

立即登入留言