iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

白話JavaScript系列 第 20

Day20-Props

前言

昨日我們介紹函式組件如何使用,並且學會了JSX靈活的操作。

今天我們來學習很重要的傳遞資料Props。

Props

當我們把頁面切割成許多組件時,本身希望組件可以被重複利用,所以我們不會把資料寫死在組件中。

那我們要怎麼把資料傳給組件並且渲染呢???

答案就是使用Props傳遞給子組件

首先

  1. 在src下建立兩個folder
    • View
    • Components

https://ithelp.ithome.com.tw/upload/images/20210919/20130419XpNK3cTDoO.png

  1. View中建立App.js
  2. Components中建立Child.js
    https://ithelp.ithome.com.tw/upload/images/20210919/20130419Ml79QpNt1s.png
  3. 在App.js中引入Child組件
    而我們怎麼使用引入的組件呢???

使用<Child />或是<Child> </Child>

import Child from '../Components/Child'

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>App page</h1>
      <Child />
    </div>
  );
}
export default App;
  1. 定義name = 'Ian',並且把name變數傳遞給nameProps
//App.js
import Child from '../Components/Child' 

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>App page</h1>
      <Child name={name}/>
    </div>
  );
}
export default App;
  1. 在Child中取用參數props

我們把props打印出來看看

//Child.js
import React from 'react'

function Child(props) {
  console.log(props);
  return (
    <div>
    </div>

  )
}

export default Child

https://ithelp.ithome.com.tw/upload/images/20210919/20130419tUGL6LwKlX.png

// Child.js
import React from 'react'

function Child(props) {
  return (
    <div>
     My name is : {props.nameProps}
    </div>
  )
}

export default Child

既然我們知道傳遞的Props是個物件,我們就可以使用ES6的解構賦值取出資料。

import React from 'react'

function Child({nameProps}) {
  return (
    <div>
      My name is : {nameProps}
    </div>

  )
}

export default Child

明天我們會進入State,剩下十天了,加油!!!

/images/emoticon/emoticon02.gif


上一篇
Day19-Component
下一篇
Day21-State
系列文
白話JavaScript28

尚未有邦友留言

立即登入留言