跳至主要內容

React - 三大屬性 Props

約 5 分鐘
#React

React - 三大屬性 Props

從 0 開始學 React

前言

介紹組件 三大屬性中的 Props 屬性。

React 起手式

  1. 老規矩，先建立一個 HTML，並搭建好環境

    還不知道 HTML 起手式請點我

Props - 基礎

  1. 在 script 中，使用類式組件。

    class Person extends React.Component {
  render() {
    return (
      <ul>
        <li>
          <h4>姓名：小傑·富力士</h4>
          <h4>性別：男</h4>
          <h4>念能力：強化系</h4>
        </li>
      </ul>
    )
  }
}
ReactDOM.render(<Person />, document.getElementById('app'))

  2. 這樣就先完成了最簡單的組件 組件

  3. 接著開始運用props功能

    class Person extends React.Component {
  render() {
    return (
      <li>
        <h4>
          姓名：
          { this.props.name }
        </h4>
        <h4>
          年齡：
          { this.props.age }
        </h4>
        <h4>
          性別：
          { this.props.gender }
        </h4>
      </li>
    )
  }
}
// 在 Person 標籤內添加 props 屬性
ReactDOM.render(<Person name="小傑·富力士" age="12" gender="男" />, document.getElementById('app'))

  4. 接著開啟 live server，就可以查看到props內傳遞的值 Props 值

  5. 再利用解構賦值，簡化程式碼

    class Person extends React.Component {
  render() {
    // 這樣每次使用都可以不用加 this.props 了
    const { name, age, gender } = this.props
    return (
      <li>
        <h4>
          姓名：
          { name }
        </h4>
        <h4>
          年齡：
          { age }
        </h4>
        <h4>
          性別：
          { gender }
        </h4>
      </li>
    )
  }
}
// 在 Person 標籤內添加 props 屬性
ReactDOM.render(<Person name="小傑·富力士" age="12" gender="男" />, document.getElementById('app'))

Props 批量傳遞 & 運算

  1. 當資料要代入許多props時，可以用 React 裡提供的方法，來批量傳遞

    class Person extends React.Component {
  render() {
    const { name, age, gender } = this.props
    return (
      <li>
        <h4>
          姓名：
          { name }
        </h4>
        <h4>
          年齡：
          { age }
        </h4>
        <h4>
          性別：
          { gender }
        </h4>
      </li>
    )
  }
}
// 資料
const hunter = {
  name: '小傑·富力士',
  age: '12',
  gender: '男',
}
// 運用 React 裡提供的方法，類似 ES6 的展開運算符'...'，來批量傳遞
ReactDOM.render(<Person {...hunter} />, document.getElementById('app'))

  2. 當小傑使用強制成長，把年齡提升 10 歲則可以直接在{}內進行運算

    class Person extends React.Component {
  render() {
    const { name, age, gender } = this.props
    return (
      <li>
        <h4>
          姓名：
          { name }
        </h4>
        <h4>
          年齡：
          { age + 10 }
        </h4>
        <h4>
          性別：
          { gender }
        </h4>
      </li>
    )
  }
}
// 資料
const hunter = {
  name: '小傑·富力士',
  age: '12',
  gender: '男',
}
ReactDOM.render(<Person {...hunter} />, document.getElementById('app'))

  3. 看到畫面時，這時候聰明的你，一定知道問題出在哪裡 型別問題

  4. 沒錯！把資料的字串型態改成數字型態就能正常運算了。 當多人協作，且專案龐大時，很容易不小心出錯，變成難以找到問題

檢查 props 資料型態與預處理的套件

  1. 有些時候資料不齊全時，可以設置一些警告，來避免找不到問題出在哪裡 例如：資料沒有名字，性別亂寫，年齡是字串型態。

    // 資料
const hunter = {
  age: '12',
  gender: 9453,
}

    錯誤呈現

  2. 可以再環境配置裡新引入 prop-types CDN

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js"></script>

  3. 為組件裡面，render上面，新增資料型態檢查

    // 需注意這裡 propTypes 的 p 是小寫，React 設定的
static propTypes = {
    // 這裡 PropTypes 的 P 是大寫，套件設定的
    name: PropTypes.string,
    age: PropTypes.number,
    gender: PropTypes.string,
}

  4. 這時雖然畫面還是一樣，但開發人員工具就會出現警告 馬上就能發現資料型態的錯誤 警告

  5. 這時發現沒名字卻沒報錯，在必須傳遞的資料添加.isRequired，就會設定必須傳，否則報錯

    static propTypes = {
    // 設定 isRequired 為必傳
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    gender: PropTypes.string,
    // 如果要限定傳函數則設 PropTypes.func
}

警告

  1. 這時名字年齡修正好，而性別故意不寫的話，為不是必傳的值，新增默認值

    // 新增默認值，如果沒有設年齡的預設值，資料沒年齡時，會變成 NaN
static defaultProps = {
    age: 12,
    gender: '無'
}

    成功畫面

使用函數式組件來進行 props 傳遞

  • 雖然函數式組件沒有 this 指向，但可以透過參數來進行 props 傳遞

    function Person(props) {
  const { name, age, gender } = props
  return (
    <li>
      <h4>
        姓名：
        { name }
      </h4>
      <h4>
        年齡：
        { age }
      </h4>
      <h4>
        性別：
        { gender }
      </h4>
    </li>
  )
}
// 資料
const hunter = {
  name: '小傑·富力士',
  age: 12,
  gender: '男'
}
ReactDOM.render(<Person {...hunter} />, document.getElementById('app'))

總結 Props

  1. props 是透過組件的標籤屬性傳遞。
  2. PropTypes 套件非必須，但有使用除錯會比較快。
    • 需注意使用時的大小寫，大小寫寫錯雖然不會報錯，但會失效。
  3. props 是從組件外往組件內傳遞資料
  4. 注意 props 只能讀取，不可修改。
  5. React 中 props 可以透過...展開運算符展開屬性

參考資料

相關文章

分享此文章
Johnson Mao

Johnson Mao

熱衷於分享技術、AI 與開發心得的軟體工程師。

GitHub

留言