React - 三大屬性 Props

React - 三大屬性 Props

從 0 開始學 React

前言

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

React 起手式

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

    還不知道 HTML 起手式請點我

Props - 基礎

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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. 再利用解構賦值，簡化程式碼

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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 裡提供的方法，來批量傳遞

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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 歲則可以直接在{}內進行運算

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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. 有些時候資料不齊全時，可以設置一些警告，來避免找不到問題出在哪裡
    例如：資料沒有名字，性別亂寫，年齡是字串型態。

    1
    2
    3
    4
    5
    // 資料
    const hunter = {
        age: "12", 
        gender: 9453,
    }

    錯誤呈現

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

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

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

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

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

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

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

警告

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

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

    成功畫面

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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 可以透過...展開運算符展開屬性

參考資料