Re: 新手让网页 act 起来: Day06 - PropTypes

昨天我们介绍完如何建立一个元件，今天就来介绍 PropTypes，让建立的元件更加的完整吧！

PropTypes

当我们在写元件的时候，会建议将 props 先定义好要接收什麽样的型别，而这样的好处是当别人要使用你写好的元件时，会比较清楚该传什麽样的东西进去，降低产生 bug 的机率。

延续昨天的 Message 元件，它会接收两个字串型别的 prop，但假设使用这个元件的人，忘记少传一个 prop，或是传入数字进来，如下:

const Message = ({ color, animal }) => {
  return <div>{color} {animal}</div>
}

const element = (
  <div className='container'>
    <Message color={'Black'} />
    <Message color={3} animal={'dog'} />
  </div>
)

ReactDOM.render(element, document.getElementById('root'))

画面看起来都非常的正常，但这不是我们所希望看到的。至少我们期望，如果别人少传或乱传东西到这个元件，能够在 console 印出错误讯息，来让开发的人员注意到这个问题。

接下来就让我们来使用 propTypes 来改善我们的 Message 元件。

首先在 Message 元件上建立 propTypes 的属性物件，而这个物件的 key 就是你要定义型别验证的 prop，以上面的范例来说，两个 props 都要验证。

Message.propTypes = {
  color: PropTypes.string,
  animal: PropTypes.string
}

再来，我们的 value 要必须是一个 callback ，它会接收三个参数分别是 props、这个 prop 的名称以及元件名称。

const PropTypes = {
  string(props, propName, componentName) {
    const type = props[propName]
    
    if (typeof type !== 'string') {
      throw new Error(
        `The ${componentName} component needs ${propName} prop to be type of 'string', but was passed a ${type} instead`
      )
    }
  }
}

把这两段加进去後，再去看 console 就会出现我们所写的错误讯息啦！

使用 prop-types 套件

在上面的范例中我们自己写了一个简单的型别验证，让我们可以检查传进来的 props 是不是符合预期的型别。但其实我们可以使用这个 prop-types 套件来帮助我们做检验。

<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
  <div id='root'></div>
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
  
  <script type='text/babel'>

    const Message = ({ color, animal }) => {
      return <div>{color} {animal}</div>
    }

    Message.propTypes = {
      color: PropTypes.string,
      animal: PropTypes.string
    }

    const element = (
      <div className='container'>
        <Message color={'Black'} />
        <Message color={3} animal={'dog'} />
      </div>
    )

    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>

</html>

引入 prop-types 之後，就可以把我们前面写的 PropTypes 物件删掉了，然後刚好我们之前的命名跟套件使用的物件一样，所以会发现 console，依然会出现一个型别错误讯息，不过没有给 animal prop 却没有错误提示。

这个时候只要在 string 後面加上 isRequired，让它知道这个 prop 是必填

Message.propTypes = {
  color: PropTypes.string.isRequired,
  animal: PropTypes.string.isRequired
}

再看一下 console 就会出现两个错了

关於 prop-types 的套件使用，有兴趣的人可以到它的 Github 做深入的了解，
以上就是今天的内容了，有什麽问题都欢迎在下方留言。


<<:  Day6 Redis组态档设定-SNAPSHOT

>>:  30天打造品牌特色电商网站 Day.7 HTML基础

Day3 program, process, thread傻傻分不清楚

昨天讲完了linux的核心架构，今天就开始让我们认识重要的部分吧。 以下是三个名词，程序(progr...

HTML笔记(00)-为什麽我会想学网页开发?

我是今年刚毕业的新鲜人，选择了离家229公里远的工作， 连我自己都感到很意外，毕竟我是一个非常以家人...

110/18 - Android 10以上图片剪裁

Android 10以上就很简单，直接使用MediaStore抓到图片路径，然後送给图片剪裁就好 i...

[Golang] Map

A map is an unordered collection of key-value pair...

进击的软件工程师之路-软件战斗营 第十三周

学习进度 资料结构 泛型 通配字元 Android Studio RecyclerView Recy...