Typechecking With PropTypes

خوب برای ست کردن یه defaultProps

import React from &quotreact"
const Headers = props => {
const { brand } = props;
return (
<div>
<h1>{brand}</h1>
</div>
);
};
Headers.defaultProps = {
brand: 'my app'
};
export default Headers;

بعد کل brand رو باید زا <Headers />حذف کنیم.

خوب حالا my app نمایش داده می شه.

خوب برای برسی نوع داده ارسالی تو اون فایل header مون impt + tab که این می شه

import PropTypes from 'prop-types'

خوب و برای استفاده از این هم اینطوری کد می زنیم :

import React from &quotreact"
import PropTypes from &quotprop-types"
const Headers = props => {
const { brand } = props;
return (
<div>
<h1>{brand}</h1>
</div>
);
};
Headers.defaultProps = {
brand: &quotmy app&quot
};
Headers.propTypes = {
brand: PropTypes.string.isRequired
};
export default Headers;

در کلاس ها هم می تونیم مثل بالا استفاده کنیم :

import React, { Component } from &quotreact"
import PropTypes from &quotprop-types"
class Cont extends Component {
render() {
const { name, email } = this.props;
return (
<div>
<h4>{name}</h4>
<li>
<ul>email = {email}</ul>
<ul></ul>
<ul></ul>
</li>
</div>
);
}
}
export default Cont;
Cont.PropTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired
};

این شکلی هم می تونی استفاده کنی که بیرون نباشه

import React, { Component } from &quotreact"
import PropTypes from &quotprop-types"
class Cont extends Component {
static propTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired
};
render() {
const { name, email } = this.props;
return (
<div>
<h4>{name}</h4>
<li>
<ul>email = {email}</ul>
<ul></ul>
<ul></ul>
</li>
</div>
);
}
}
export default Cont