React Hooks - Day7


Posted by rockyooooooo on 2021-08-31

[Day 11 - 網速轉換器] 那個...資料可以分享給我嗎 - 將資料傳入組件

上集回顧

Controlled Component

上次主要是要介紹 Controlled Component,在寫 React 的時候,要用 input 這個標籤的時候,我們會用 state 來控制 input 的 value,然後在 onChange 的時候用 setState 來改變 input 的 value。

如果你把 input 的 value 寫死,則 input 的值永遠不會變,除非你把 value 寫成 null 或是 undefined

今日目標

了解 React 中 Components 之間的資料傳遞。

上次我們做了網速轉換器,當我們在左邊輸入數字,右邊就會即時顯示轉換後的結果,但是下面顯示網速快慢的部分還不會跟著改變。

今天我們要把這部分也完成。

Components 的資料傳遞

因為網速的快慢是根據輸入的網速來決定,所以 <CardFooter /> 需要知道目前的 inputValue 是多少,所以我們要把 inputValue<SpeedConverter /> 傳到 <CardFooter />

在 React 裡,副 Component 要傳遞資料給子 Component 很簡單,就像是在寫 HTML 的屬性一樣,直接在子 Component 加上你要這個資料叫什麼,要傳什麼資料進去,就好了。

而子 Component 就可以從 function 的 () 裡把資料拿出來,這個資料就會叫做 props。

const Child = (props) => {
  console.log(props)  // {num: 123}
}

const Parent = () => {
  const num = 123
  return <Child num={num} />
}

如果不是自閉標籤,且把值放在標籤中間,則會變成這樣:

const Child = (props) => {
  console.log(props)  // {children: 123}
}

const Parent = () => {
  const num = 123
  return <Child>{num}</Child>
}

如果自己定義 children,而且也有在標籤裡面傳值,則標籤裡的會蓋過自己定義的 children

const Child = (props) => {
  console.log(props)  // {children: 123}
}

const Parent = () => {
  const num = 123
  return <Child children={456}>{num}</Child>
}

幫之前的計數器加上不一樣的起始值

跟上面的方法一樣,在 <Counter /> 傳入要設定的起始值 props,再從 const Counter = (props) => {} 裡取用 props

讓每個計數器有不一樣的最大值跟最小值

把最大值跟最小值用 startingValue 來決定。

或是再另外傳入 maxNumber, minNumber 當作 props。

使用 Hooks 要注意的事

React 的 Hooks 在慣例上會用 use 開頭,像是 useState, useEffect, useRef ...等等。

而使用 Hooks 有一個很重要的原則,不能在條件式迴圈巢狀函式nested functions)裡面呼叫 Hooks,以 useState 為例:

const Component = () => {

  if(true) {
    const [state, setState] = useState()
  }

  return (
    ...
  )
}

會直接噴錯誤。

時間夠的話

[Day 12] 快速了解各組件的資料狀態 - React DevTools

React DevTools

Components

  1. 可以看到所有的 Components
  2. 可以在 Elements 標籤選取到想查看的部分,再移到 Components 標籤,就會顯示該部分是哪個 Components
  3. Components 標籤也有選取功能
  4. 可以看到 props 跟 state 內容,也可以直接修改
  5. 「碼表」按鈕:適合用在有套用 React.Suspense 的 Component,這種 Components 因為需要等到 AJAX 資料回來才會渲染對應畫面,所有會有等待的畫面
  6. 「眼睛」按鈕:可以直接切換到 Elements 標籤,讓你看到該 Component 在 DOM 的位置
  7. 「蟲蟲」按鈕:會在 console 印出該 Component 的一些資料,方便複製或用 JavaScript 來操作資料
  8. 「原始碼」按鈕:可以切換到 Source 標籤,顯示該 Component 在原始碼的位置

Profilter

看不懂,看得懂的教我


#javascript #React







Related Posts

詳解簡易 Timer 來學習 D3

詳解簡易 Timer 來學習 D3

Laravel blade 基礎

Laravel blade 基礎

系統架構

系統架構


Comments