iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

以 React 為主的那些前端事系列 第 8

Day 08 - 那些在 component 裡的 Props 與 State

如果有錯誤,歡迎留言指教~ Q_Q

Stateful Component vs no-Stateful Component

function component 其實就是 JavaScript 的 function

傳給 function 的參數就是 props 啦~

Stateful Component

const NewsSlider = ({ title, ...props }) => {

    return (
        <div> I am NewsSlider~ { title } </div>
    )
}

no-Stateful Component

const Footer = () => {

    return (
        <div> I am FOOTER </div>
    )
}

<input /> 就是一個元件 input,擁有不同的邏輯跟樣式

我們要告訴 input 長出我們需要的樣式
我們就需要給 input 元件更多的資訊,讓他知道要做什麼事
type= button 一顆按鈕
checkbox password 一個密碼輸入框
radio text 一個文字輸入框

我們說type就是input的其中一種屬性,
藉由這個屬性,我們可以給元件更多資訊,
讓他獲得更多詳細的資訊,更精確完成你想要的畫面或是商務邏輯

一個元件也可以有不只一種屬性
像是 input 還有 name value id 各自都有各自的功能

<input type="checkbox" class="checkbox" checked="true" />

props: component 接收從外部的資料

props 從上層傳進來後,不能直接被修改值,要保持 immutable 的特性

像是 html 的屬性,例如:name、href
props 是我們自訂的 component 屬性 -> prop,全名 property


<Card title="Card1" description="card1 desc">


const Card = (props) => {
  const { title, description } = props;
  return (
    <div className="card">
      <div className="card-title">{title}</div>
      <div className="card-body">{description}</div>
    </div>
  );
};

component 的命名 -> 字首必須為大寫: NewsSlider

state: component 自己內部的狀態

Component 可接收外部傳進來的 props 進來的資料之外,也可以保存自身的 state

也可以擁有自己的 state 資料,當 state 改變時,component 則會 render

那怎樣使用 state 呢~

那就繼續看下一篇吧~


上一篇
Day 07 - 非同步流程控制
下一篇
Day 09 - 那個很常用到的 useState
系列文
以 React 為主的那些前端事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言