先創(chuàng)建一個(gè)自定義組件，這次不用箭頭函數(shù)，用普通函數(shù)。
//這是個(gè)用函數(shù)方式創(chuàng)建的自定義組件升略，記得函數(shù)名首字母大寫
function Hi(props) {
return (
<div>
你好, {props.lastName} {props.firstName}
</div>
)
}
我們來使用一下：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
function Hi(props) {
return (
<div>
你好, {props.lastName} {props.firstName}
</div>
)
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
Hi組件使用到了兩個(gè)屬性，并且這兩個(gè)屬性很明顯是string類型屡限，然而在使用中我們給firstName屬性傳入了一個(gè)bool類型的值品嚣，沒有給lastName屬性賦值。
有沒有辦法給屬性值加上類型檢查之類的驗(yàn)證呢钧大？使用組件的靜態(tài)propTypes屬性翰撑，它是個(gè)對(duì)象。比如我們要給firstName加上驗(yàn)證拓型，那就要在propTypes中添加一個(gè)鍵名為firstName额嘿，鍵值為一個(gè)函數(shù)，函數(shù)有三個(gè)輸入?yún)?shù)劣挫，分別是props，propName东帅，componentName压固。來看下怎么用：
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react庫用development版本，propTypes才會(huì)起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
function Hi(props) {
return (
<div>
你好, {props.lastName} {props.firstName}
</div>
)
}
Hi.propTypes = {
//props就是Hi組件的props靠闭，propName這里就是firstName
firstName(props, propName, componentName) {
//props[propName]就是取得Hi組件firstName的值
if(typeof props[propName] !== 'string') {
return new Error(`${componentName}的${propName}屬性的值應(yīng)是字符串類型`)
}
}
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
效果如圖1帐我。
圖1
firstName和lastName的驗(yàn)證是一樣的，之前提到過復(fù)用愧膀，我們可以把公共代碼抽取成一個(gè)函數(shù)拦键。
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react庫用development版本，propTypes才會(huì)起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
function Hi(props) {
return (
<div>
你好, {props.lastName} {props.firstName}
</div>
)
}
//公共代碼包裹到string函數(shù)里檩淋，并放到一個(gè)對(duì)象中統(tǒng)一管理
const PropTypes = {
string(props, propName, componentName) {
if(typeof props[propName] !== 'string') {
return new Error(`${componentName}的${propName}屬性的值應(yīng)是字符串類型`)
}
}
}
Hi.propTypes = {
//鍵為要驗(yàn)證的屬性名芬为，值為函數(shù)
firstName: PropTypes.string,
lastName: PropTypes.string
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
其實(shí)react團(tuán)隊(duì)早已為我們準(zhǔn)備好了PropTypes包供我們使用，我們只要引入就好了蟀悦。
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react庫用development版本媚朦，propTypes才會(huì)起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
function Hi(props) {
return (
<div>
你好, {props.lastName} {props.firstName}
</div>
)
}
Hi.propTypes = {
//引入prop-types后，使用方式和之前相同
firstName: PropTypes.string,
lastName: PropTypes.string
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
更具體的使用方式請(qǐng)查看prop-types包的文檔日戈。
其實(shí)定義react組件不僅可以使用函數(shù)的方式询张，還可以使用class，也就是類的方式來定義浙炼。用類的方式定義的組件如何使用prop-types包呢份氧？看代碼：
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react庫用development版本唯袄，propTypes才會(huì)起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
class Hi extends React.Component {
//定義成靜態(tài)屬性
static propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string
}
render() {
const {lastName, firstName} = this.props
return (
<div>
你好, {lastName} {firstName}
</div>
)
}
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
最后提醒大家注意，當(dāng)你要真正發(fā)布產(chǎn)品的時(shí)候蜗帜，請(qǐng)使用react.production包恋拷，它不會(huì)使用PropTypes，因?yàn)?code>PropTypes會(huì)大大降低程序的性能钮糖。所以我們?cè)陂_發(fā)的時(shí)候才用react.development梅掠。
