react 事始め 5

◾️PropTypes

• PropTypes：プロパティに対する型チェックをするためのパッケージ
• ライブラリ名を「prop-types」、ライブラリからインポートしたモジュール名を「PropTypes」

まず、PropTypesをインポートする

import PropTypes from 'prop-types'

次に、コンポーネントが受け付けるプロパティに対する型チェックを定義する

User.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number
}

上記二つの反映後

import React from 'react';
import PropTypes from 'prop-types'

const App = () => {
  const profiles = [
    { name: "TKB_48", age: 15,},
    { name: "HKT_48", age: 12,},
    { name: "NMB_48" }
  ]
  return (
  <div>
    {
      profiles.map((profile, index) => {
        return <User name={profile.name} age={profile.age} key={index} />
      })
    }
  </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name}, and {props.age} years old! </div>    
}

User.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number
}

export default App;

ageの入力を必須項目としたいとき、isRequiredを付ける

User.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
}

import React from 'react';
import PropTypes from 'prop-types'

const App = () => {
  const profiles = [
    { name: "TKB_48", age: 15 },
    { name: "HKT_48", age: 12 },
    { name: "NMB_48", age: 14 }
  ]
  return (
  <div>
    {
      profiles.map((profile, index) => {
        return <User name={profile.name} age={profile.age} key={index} />
      })
    }
  </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name}, and {props.age} years old! </div>    
}

User.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
}

export default App;