如果我們想要強迫傳來的Prop是某種型態或是強迫某個Prop一定要被傳入的話，

我們可以使用PropType這個Reactj外部套件來作驗證

• 首先呢先來執行以下指令來安裝這個套件吧!!

  yarn add prop-types --dev
  

• 接著，在我們要使用這個套件的Component裡import這個套件

  import React from 'react';
  import propTypes from 'prop-types';
  
  export default class  Test extends React.Component {
  
      render(){
  
          return(
              <div>1234</div>
          )
      }
  }
  

• import完成後，我們來試試看驗證一個叫作word的prop吧!

  import React from 'react';
  import propTypes from 'prop-types';
  
  export default class  Test extends React.Component {
  
      render(){
  
          return(
              <div>1234</div>
          )
      }
  }
  Test.propTypes={
      word:propTypes.string.isRequired,
  
  }
  

• 再來，試著在父類別導入這個Component吧 ! (這邊小菜鳥就直接在App.js裡導入這個Component)

  import './App.css';
  import Test from './Components/Test'
  
  function App() {
  
    return (
      <div className="App">
  
        <Test/>
      </div>
    );
  }
  
  export default App;
  

  這時候各位看官們可以打開F12的Console，由於在子類別我們有限定word這個prop是必要傳入的，但我們在父類別完全沒傳入，所以會看見如下圖的警告

  

• 我們試著傳入word這個prop到子類別

  import './App.css';
  import Test from './Components/Test'
  
  function App() {
  
    return (
      <div className="App">
  
        <Test word={1234}/>
      </div>
    );
  }
  
  export default App;
  

  然後打開console，我們又會發現警告又告訴我們word我們有在子類別規定它是string型態，但我們傳入的是number型態(如下圖)

  

• 最後我們將word調整成文字型態

  import logo from './logo.svg';
  import './App.css';
  import Test from './Components/Test'
  
  function App() {
  
    return (
      <div className="App">
  
        <Test word={"1234"}/>
      </div>
    );
  }
  
  export default App;
  
  

完成後，討人厭的紅色警告就不見了 !!

Proptype驗證的好處，是幫助我們在寫code的時候更謹慎，

因為有時候props太多，傳來傳去，很容易就少傳了，也可以幫我們驗證prop的型態

雖然說，這中間有可能一直看到惱人的紅色警告，但清完這些警告後，
就會有一種通體舒暢的感覺(๑˃̵ᴗ˂̵)ﻭ !

我們在安裝propType檢查的套件的時候，是安裝在開發模式，
如果我們不想要使用者模式(Production Mode)顯示這惱人的紅色警告的話，
其實我們是可以移除的!

• 執行 yarn add babel-plugin-transform-react-remove-prop-types--dev

• 在webpack.config裡加上以下程式碼

  .configureBabel((babelConfig)=>{
        if(Encore.isProduction()){
            babelConfig.plugins.push(
                'transform-react-remove-prop-types'
            )
        }
      })
  

這篇介紹完了Proptype驗證，
下一篇要來介紹在DOM上傳參考(ref)的方法，好啦真的!!
下一篇結束後就要進入我們的Test了~