react propTypes

propTypes

基本的に、反応器は素子に支柱を提供することができる.
もう1つの方法は、私が欲しいアイテムの値をチェックすることができます.
proptypeを使用すると、エラーを減らすために常にタイプをチェックできます.
proptypeを使用するには、npmにインストールする必要があります.

npm i prop-types

import PropTypes from "prop-types";

インストール後のアプリケーション.js上端でprotTypeが呼び出されます.
使い方は以下の通りです.

function Food({ name, picture, rating }) {
  return (
    <h2>
      I like {name}
      <span>
        <img src={picture} alt={name}></img>
      </span>
      <p>rating : {rating}</p>
    </h2>
  );
}

function App() {
  return (
    <div className="App">
        <Food key={dish.id} name={dish.name} picture={dish.src} rating={dish.rating}/>
    </div>
  );
}

このようにuniquekeyからpropnameとvalueをそれぞれ読み込み、素子に送信する.
これまでproptypeは使用されていませんでしたが、これからタイプチェックでエラーを減らすことができます.

Food.propTypes = {
  name: PropTypes.string,
  picture: PropTypes.string,
  rating: PropTypes.number,
};

component.proptypeというproperを使用してアクセスします.
客体形式で書くことができます.
key : propName
value:チェックするタイプ
ratingがnumberでチェックされ、送信された値がstringの場合、この結果が出力されます.

console errorでnumberを受け取るのを楽しみにしていたがstringが現れたと教えてくれた.
膨大な数であっても、ミスを防ぐために道具の種類をチェックすることが望ましい.