在react中,props用于给组件传递属性,对所传递的属性可以作以下三种限制:
- 数据类型的限制
string number func
- 必要性的限制
isRequired
- 指定默认的属性值
类.defaultProps
- 对标签属性进行必要性、类型的限制
注意:
在react V15.5之前,限制props的写法是:React.PropTypes
class Person extends React.Component {
}
Person.propTypes = {
name: React.PropTypes.string,
}
在react V15.5之后,限制props的写法是:1、需要引入prop-types的库 2、PropTypes
class Person extends React.Component {
}
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func
}
- 指定默认属性值
Person.defaultProps = {
sex: 'boy',
age: 19
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>props的批量传递</title>
</head>
<body>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script type="text/babel">
class Person extends React.Component {
render () {
const { name, sex, age } = this.props
return (
<ul>
<li>姓名: { name }</li>
<li>性别: { sex }</li>
<li>年龄: { age }</li>
{speak()}
</ul>
)
}
}
// 对标签属性进行必要性、类型的限制
Person.propTypes = {
// name: React.PropTypes.string, // react V15.5之前一直是这样写限制数据类型 之后这种写法被弃用
// 新写法,需要先引入prop-types的库
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func
}
// 指定默认标签属性值
Person.defaultProps = {
sex: 'boy',
age: 19
}
function speak() {
return '说话'
}
// 对所传递的属性进行: 1、类型的限制 2、必要性的限制 3、指定默认的属性值
ReactDOM.render(<Person name="tom" speak={speak} />, document.getElementById('test'))
</script>
</body>
</html>