iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
自我挑戰組

Re: 從 Next.js 開始的 React 生活系列 第 14

[Day14] 學 Reactstrap 就離 React 不遠了 ~ 用 Navbar 認識 useState

前言

今天真的要進入 useState 了!!!!!
進入今天文章前請看一下昨日文章
裡面有寫到關於 Navbar 的架構介紹,
今天就不會再講到這部份~

本日正文

覺得程式碼可能還是要再貼一遍,
不然直接看今天這篇的人可能會不知道我下面在說什麼XD

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default function App() {
  const [collapsed, setCollapsed] = useState(true);
  const toggleNavbar = () => setCollapsed(!collapsed);
  
  return (
    <div className="px-2">
      <Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">關於我</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/navbar/">與我聯繫</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

接下來要更進一步說明了,

<Collapse isOpen={!collapsed}>

先從 <Collapse> 的 isOpen 說明,
isOpen 意思是何時要打開 <Collapse> 裡面的內容,
而它的設定是 {!collapsed}
collapsed 又是什麼,讓我們往上看,
會發現有 const [collapsed, setCollapsed] = useState(true); 這樣的設定,
我記得我一開始看到這個完全問號XDDDDDDDDDD
就算看了官方文件還是霧煞煞QAQ

這邊我用我理解的方式簡單說明一下,
(PS. 不一定貼近真正 React 的意思,但覺得這樣的理解方式可能比較好入門)

const [collapsed, setCollapsed] = useState(true);

是指宣告一個變數 collapsed,setCollapsed 是改變 collapsed 值的方式。

而為什麼要這樣,
const 的宣告方式是不能改變變數的值對吧?
假設我現在寫這兩行 code:

const test = 1;
test = 2;

就會出現以下 error:

TypeError: Assignment to constant variable

然後再拿這個 error 去查詢可以找到對於這個錯誤的說明:

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment

由以上得知用 const 宣告的變數是 read-only,且不可被改變的(cannot be reassigned),
但你還是想改變它的時候該怎麼辦?
在 React 提供了 useState 的方式,
讓你還是可以去改變用 const 宣告變數的值。
在這裡可以把 setXXX 看成是一個 useState 的 function
setXXX 的 XXX 是可以自訂的,但為了維護跟程式易讀性,
通常 XXX 會放變數的名稱(搭配第一字大寫),
因此 const [collapsed, setCollapsed]
的意思是有一個用 const 宣告的變數 collapsed,
改變 collapsed 值的 function 是 setCollapsed,
而 setCollapsed 做的事就是用 useState 去改變值。

const [collapsed, setCollapsed] = useState(true);
那這整句話又是什麼意思?
當一個變數宣告了總是要給它初始值吧,
所以這邊意思是 collapsed 初始值被宣告為 true。

我覺得拿 JavaScript 的寫法來翻譯有點像是這樣:
(PS. 以下程式是不正確的,只是想要翻譯成剛開始接觸 React 的人比較看得懂的樣子)

const collapsed;
setCollapsed(true);

funtion setCollapsed (value) {
	collapsed = useState(value);
}

所以如果之後我要改變 collapsed 的值,
我只能透過 setCollapsed,
例如 setCollapsed(false)
collapsed 的值就會被改為 false 這樣。

有這樣的基礎後,我們就可以再往上看這句了,

<NavbarToggler onClick={toggleNavbar} className="mr-2" />

onClick 顧名思義就是指當 <NavbarToggler> 被點擊時要做什麼動作,
跟我們之前在 HTML 寫 onclick="myFunction()" 是相似的。

所以這邊的意思就是當 <NavbarToggler> 被點擊時要執行 toggleNavbar
toggleNavbar 又是什麼?再往上看會看到這句:

const toggleNavbar = () => setCollapsed(!collapsed);

這個意思是 toggleNavbar 是一個 function,
要執行 setCollapsed,且要以 collapsed 的相反值去執行(!collapsed)。

所以當目前是折疊狀態 collapsed 為true,
<NavbarToggler> (menu icon) 被點擊時,就會變為 false,(將選單展開的狀態)
反之則又變為 true。

這邊我們回過頭看 toggle 的意思,
就是(輪流)切換的意思,
通常看到元件是 toggle,
代表它的狀態會在啟用、關閉中切換,
所以 toggleNavbar 會設置成 !collapsed 就不難理解了。

然後今天雖然都在翻譯程式(?
但還是附一下今日連結(其實跟昨天是同一個) → Day13.14 - Reactstrap (Navbar)

也許從 React 開始接觸的人看這邊會覺得很直覺,
但我是從 Reactstrap 反過來接觸到 React 的,
而且在這之前只有接觸 HTML/CSS, JavaScript 的寫法,
所以一開始我也只能自己多改程式測測看,
然後才慢慢了解它的用法。

希望我這樣的解釋方式可以讓從寫 HTML/CSS, JavaScript 跳到 React 的人比較看得懂orz
(如果有錯請多多見諒QQ)

一直到現在我也不敢說我真的會 React 了,
我算是用自己理解的方式在寫就是了XD

不過學語言好像就是如此,
要先從模仿開始,
無論是學外語或是程式語言都一樣,
在還不了解文法跟單字的時候,
就是先模仿,多試多學多講多用,
久了就會知道怎麼用了。

後記

今天終於來到第二週結束!
但明天開始的文章我又沒梗了orz
關關難過關關過,
希望我能完賽orz


上一篇
[Day13] 學 Reactstrap 就離 React 更近了 ~ Navbar ‧ 初識篇
下一篇
[Day15] 學 Reactstrap 就離 React 不遠了 ~ 用 Tooltips 熟悉 useState
系列文
Re: 從 Next.js 開始的 React 生活31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言