1. 程式人生 > >【react】利用prop-types第三方庫對元件的props中的變數進行型別檢測

【react】利用prop-types第三方庫對元件的props中的變數進行型別檢測

1.安裝:npm install prop-types --save

2.使用

import React, { Component } from 'react';
import PropTypes from 'prop-types'

const users = [
  1,
  { username: 'Tongbao', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]
 
class User extends React.Component {
  render () {
    const { user } = this.props
    return (
      <div>
        <div>姓名:{user.username}</div>
        <div>年齡:{user.age}</div>
        <div>性別:{user.gender}</div>
        <hr />
      </div>
    )
  }
}

User.propTypes = {
  user: PropTypes.object
}

class App extends Component {
  render() {
    return (
      <div>
        {users.map((user, i) => <User key={i} user={user} />)}
      </div>
    );
  }
}

export default App;

3.錯誤展示