React 屬性驗證

§ 沒有用到生命週期, state 內容簡單時, 用 Function 寫法驗證屬性

§ propTypes 驗證元件 props 型別

§ default Props 為元件 props 定義預設值

§ isRequired 必填, 沒有加上的話 isRequired 就要在 default Props 填上預設值

§ props型別：array, bool, func, number, object, string,element

範例

 import React from 'react';

  export default function Todo(props) {

    return (

      <h1>Hello, {props.name} {props.age}</h1>

    );
  }

  Todo.propTypes = {

    name: PropTypes.string,

    age: PropTypes.number.isRequired,
  };

  Todo.defaultProps = {

    name: 'jack',
  };

§ 有用到生命週期, state , 用 class 驗證屬性

export default class Hello extends React.Component {

  static propTypes = { 

    name: PropTypes.string.isRequired,  

    age: PropTypes.number,    ==> 沒有 isRequired 就要設定 defaultProps

    children: PropTypes.element,  ==> children 一定要用 element

  };


  static defaultProps = { 
    age: 18
  };


  render() {

    const {name, age, children} = this.props;  ===> 解構式

    return (

      <div>

        Hello, my name is {name} .  ===> { } 為變數

        my age is {age}.

        {children}

      </div>
    );
   }
  }

ReactDom.render (

  <Hello name=’Jack’>

    <div>                 --------
     <h2>xxxxxxx</h                               
       <p>xxxxxxxxxxx</p>         |==> 類 HTML ,children 的內容
     </div>               --------  

  </Hello>,

  document.getElementById(‘app’)
);