【Day9】React Proptype的验证及套用方法看这里 ! ٩(●˙▿˙●)۶…⋆ฺ

如果我们想要强迫传来的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了~