先创建一个自定义组件,这次不用箭头函数,用普通函数。
//这是个用函数方式创建的自定义组件,记得函数名首字母大写
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
组件使用到了两个属性,并且这两个属性很明显是string
类型,然而在使用中我们给firstName
属性传入了一个bool
类型的值,没有给lastName属性赋值。
有没有办法给属性值加上类型检查之类的验证呢?使用组件的静态propTypes
属性,它是个对象。比如我们要给firstName
加上验证,那就要在propTypes
中添加一个键名为firstName
,键值为一个函数,函数有三个输入参数,分别是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才会起作用 -->
<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}属性的值应是字符串类型`)
}
}
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
效果如图1。
firstName
和lastName
的验证是一样的,之前提到过复用,我们可以把公共代码抽取成一个函数。
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本,propTypes才会起作用 -->
<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函数里,并放到一个对象中统一管理
const PropTypes = {
string(props, propName, componentName) {
if(typeof props[propName] !== 'string') {
return new Error(`${componentName}的${propName}属性的值应是字符串类型`)
}
}
}
Hi.propTypes = {
//键为要验证的属性名,值为函数
firstName: PropTypes.string,
lastName: PropTypes.string
}
ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>
其实react团队早已为我们准备好了PropTypes包供我们使用,我们只要引入就好了。
<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本,propTypes才会起作用 -->
<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>
更具体的使用方式请查看prop-types包的文档。
其实定义react组件不仅可以使用函数的方式,还可以使用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才会起作用 -->
<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 {
//定义成静态属性
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>
最后提醒大家注意,当你要真正发布产品的时候,请使用react.production
包,它不会使用PropTypes
,因为PropTypes
会大大降低程序的性能。所以我们在开发的时候才用react.development
。