30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

React 傳遞資料

那如何實現將資料互相傳遞呢?

從 上一篇 有講到，元件是以 Tree 的結構呈現

一般來說，資料都是從上到下的傳遞

假設有一個畫面的結構是這樣的

<div>
  <Count>
  <Button>
</div>

陽春的畫面 XD

我們希望點擊按鈕的時候，Count 會加一

也就是要把<Button>按下之後，將 +1傳入<Count>

先從父傳子開始!

先來了解如何將資料從上流到下面

Main.js 父元件

const main = () => {
  const counter = 56

...略

  return (
    <div>
      <Count data={counter}>
      <Button>
    </div>
  )
}

Count.js 子元件

將資料透過 props 傳下去，子層就透過props.data取得

若今天父層是寫count={counter}，用就props.count

基本上命名隨意，但還是有保留字要注意 (如: style)

const Count = props => {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  )
}

---

再來子傳父吧!

再來我們來把 Button 設置點擊 event，先來看看如何在子層發生的動作，由父層回傳呢?

Button.js 子元件

簡單的綁定 Event!

const Button = props => {
  const clickEvent = event => {
    console.log(event.target)
  }

  return (
    <div>
      <button onClick={clickEvent}>PLUS</button>
    </div>
  )
}

OK，接下來就是真正子傳父的互動了!

Main.js 父元件

與傳資料方式大同小異，我們把一個 function 傳下去

const main = () => {
  const counter = 56

  const getClickEvent = (event) => {
    console.log(event)
  }

  return (
    <div>
      <Count data={counter}>
      <Button event={getClickEvent}>
    </div>
  )
}

Button.js 子元件

當我們透過呼叫 props.event()，等同於呼叫 getClickEvent

getClickEvent設定了一個 argument，於是在子元件props.event(event.target)

把東西就這樣從子傳到父元件了!

const Button = props => {
  const clickEvent = event => {
    props.event(event.target)
  }

  return (
    <div>
      <button onClick={clickEvent}>PLUS</button>
    </div>
  )
}

---

如何更新 counter 的數值

這時候就要使用 useState

useState 是 React Hook 的其中一種

記得要引用

import { useState } from "react"

---

Main.js 父元件

使用 useState

const [state, setState] = useState()

const [state(取用的變數), setState(設定新的值用的Function)] = useState(填入初始值)

寫法如下，現在 counter 只要改變，就會影響到後面`有使用 counter 地方就會跟著改變

const main = () => {
  //const counter = 56
  const [counter, setCounter] = useState(56)

  const getClickEvent = (event) => {
    setCounter((prevState) => { return prevState++ })
  }

  return (
    <div>
      <Count data={counter}>
      <Button event={getClickEvent}>
    </div>
  )
}

另外 setState(setCounter)的 function 寫法:

setCounter((prevState) => { return prevState++ })

prevState屬於前一次的狀態，以上面例子來說是 56

const [state, setState] = useState()

重新回顧

• 若今天要更新狀態使用setState(newStuff)
• 更新狀態時，會用到前一次的值 setState((prevState) => prevState...)
• 更新狀態用prevState，勿直接 modify state，可能會有隱藏的問題
• 純取用狀態就用 state

---

更多 hook 就留到下一次的文章吧!