PropTypes

3717 ワード
React テキストリンク

PropTypesとは?


Reactでpropタイプのライブラリを確認します.必要でないタイプのpropをスキップまたは欠落した場合、正常にログインできない可能性があります.そこで、PropTypeを使います.
設定
npm i prop-types

使用

//Example.js
import React from 'react';
import Food from './components/Food';

const Example = () => {
  return (
    <Food name="Seafood" />
  );
}

export default Example;
//Food.js
import React from 'react';
import PropTypes from 'prop-types';

const Food = ({ name }) => (
  <div>
    This is {name}.
  </div>
);

Food.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Food;
Example.jsはFoodjsで道具を渡す.タイプは文字列のみを受信するため、Foodです.jsではPropTypeでチェックします.

それ以外は、func、bool、array、number、objectなどのpropsのタイプによってチェックすればいいのです.
isRequiredを貼り付けることで、入力する必要のあるpropを定義できます.
の最後の部分
この方法も良いですが、TypeScriptの方が効果的だと思います.
レンズ
[伯俊]1316 C++