iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0

【前言】
  昨天我們實作了第一個React Component了,有沒有覺得自己有沒有變強了一點呢?這篇要來介紹一下React的Props屬性囉!

【正文】
  回想上次的 Hello,Hyora ,在單單只render一句話的時候是不是覺得還好,可是如果要render很多個呢?總不可能要把程式碼寫成這樣吧?

//上方import略

class App extends React.Component {
  render() { 
    return ( 
      <div>
        <div>Hello, Hyora</div>
        <div>Hello, Leo</div>
        <div>Hello, Nelly</div>
      </div>
    );
  }
}

// 下方export略

  上面這樣寫也太不漂亮了,又臭又長,而且重複的地方好多哦。難道不可以把名稱就當成什麼變數傳遞下去再叫React render嗎?答案是可以的!首先要記住Props(Property)有幾個特點:

  1. Props是由父層傳遞下去
  2. Props是不可以自己做更改
  3. 只要父層的Props值有變動,Component即會重新render

  回頭來看看剛剛的程式碼,我們可以將其切割成一個<Greeting>Component,並在App.js import時,將名字當成Props傳給<Greeting>,讓其render出來。讓我們來改寫一下吧,首先:

  1. 調整專案資料夾目錄結構,並新增Greeting.js檔:
    結構

  2. 撰寫Greeting.js檔案

import React from 'react';

class Greeting extends React.Component {
  render() {
    const { name } = this.props; // 運用ES6解構,對應出this.props的結構
    return(
      <div style={{ textAlign: 'center' }}>
        Hello, {name} {/* 將props值用{}放進要放入的地方*/}
      </div>
    );
  }
}

export default Greeting; // 匯出Greeting Component
  1.  改變App.js
import React from 'react';
import Greeting from './component/Greeting'; // import Greeting 模組

class App extends React.Component {
  render() { 
    return ( 
      <div>
        {/* 將name這個屬性裡面的值當成是props傳給Greeting */}
        <Greeting name="Hyora"/>
        <Greeting name="Yoyo" />
        <Greeting name="Leo" />
        <Greeting name="Nelly" />
      </div>
    );
  }
}

export default App;

  再回到我們的網頁,是不是得到跟昨天一樣的結果呢?雖然因為我們的範例內容很少,看起來與原本的差沒有多少,反倒還要再多寫一隻js檔案,不過如果之後等專案很大、<Greeting>組件很常被用到時,利用Props傳入render也不失是一個好方法哦。
畫面

  那今天就到這邊囉,明天會再繼續另外一種屬性state,我們下次見,bye~


上一篇
【DAY 03】Hello, React! 我終於印出你了!
下一篇
【DAY 05】React!說,State又是誰啊?
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言