[React] Protection with PropTypes
反応確認
💎
反応公式文書で確認することもできます.
=> PropTypeのタイプの確認
props
は私が欲しいprops
の方法です!💎
npm i prop-types
ライブラリをインストールします.Typescript
は使用可能ですが、React
には内蔵タイプ確認機能があります.反応公式文書で確認することもできます.
=> PropTypeのタイプの確認
import PropTypes from 'prop-types'; // 이렇게 라이브러리를 import해주고 사용하면 된다
const foodILike = [{...}];
function Food ({ name, picture, rating }) {
return (
<div>
<h1>Hello, {name}</h1>
<h4>{rating}/5.0</h4>
<img scr={picture} alt={name} />
</div>
);
}
Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired
};
function App() {
return (
<div>
{foodILike.map(dish=>(
<Food
key={dish.id}
name={dish.name}
picture={dish.image}
rating={dish.rating}
/>
))}
</div>
);
}
export App
結果はコンソールウィンドウで表示できます.Reference
この問題について([React] Protection with PropTypes), 我々は、より多くの情報をここで見つけました https://velog.io/@sunaaank/React-Protection-with-PropTypesテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol