组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素
一.props的使用
1.一些组件并不需要知道自己的children,尤其是像Sidebar和Dialog这通用'boxes'的组件。在这些组件中,我们推荐使用特别的children props直接将孩子元素传递到组件中。
function FancyBorder(props){
return(
<div>
{props.children}
</div>
)
}
function WelcomeDialog(props){
return <FancyBorder>
<h1>Welcome</h1>
<p>Thank you for visiting our spacecraft!</p>
</FancyBorder>
}
在<FancyBorder>中的任何tag都将作为children props传递到FancyBorder组件中
2.你除了可以通过children props直接向组件中传递子元素,你也可以按照你自己的习惯,而不是使用children
function FancyBorder(props){
return <div>
{props.top}
{props.bottom}
</div>
}
function WelcomeDialog(props){
return <FancyBorder top={<Top/>} bottom={<Bottom/>} />
}
function Top(props){
return <p> I am top</p>
}
function Bottom(props){
return <p>I am bottom</p>
}
因为React元素(如:<Top>,<Bottom>)只是对象,所以可以将它们作为props传递到其他组件中
3.在某些情况下可能需要基于一个普通的组件创建出一个特别的组件。如通过Dialog组件创建出WelcomeDialog组件。在这里我们可以通过配置Dialog组件的props创建出特别的
WelcomeDialog组件。
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
二.propTypes
从React15.5起,React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。
import PropTypes from 'prop-types'
PropTypes暴露了一系列能够确定接受的props是否合法的验证器,出于性能的考虑,PropTypes在开发模式下才会起作用
import PropTypes from 'prop-types'
class Greeting extends React.Component{
render(){
return <div>welcome,{this.props.name}</div>
}
}
Greeting.propTypes = {
name:PropTypes.string
}
prop-types提供了大量的验证器,举例如下:
import PropTypes from 'prop-types'
myComponent.propTypes = {
// 数组
optionalArray: PropTypes.array,
// 布尔值
optionalBool: PropTypes.bool,
// 函数
optionalFunc: PropTypes.func,
// 数值
optionalNumber: PropTypes.number,
// 对象
optionalObject: PropTypes.object,
// 字符串
optionalString: PropTypes.string,
// symbol
optionalSymbol: PropTypes.symbol,
// 能够被渲染的数值,字符串,元素或者包含这些类型的数组
optionalNode: PropTypes.node,
// React元素
optionalElement: PropTypes.element,
// optionalMessage是Message类的实例
optionalMessage: PropTypes.instanceOf(Message),
// optionalEnum为['News', 'Photos']中的其中一个
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
//optionalUnion要么为字符串,要么为数值,要么为Message实例
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// optionalArrayOf是数值类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// optionalObjectOf的属性是数值
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// requiredFunc是函数,且必须提供。isRequired可以链接到任何值后面
requiredFunc: PropTypes.func.isRequired,
// requiredAny可以是任何类型,且必须提供
requiredAny: PropTypes.any.isRequired,
// 自定义验证器。customProp中必须包含matchme
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 自定义数组,对象类型的验证器
// 验证器会调用数组或者对象中的每一个值
// customArrayProp中的每一个值都要包含matchme
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
}
给props指定默认值
通过组件的defaultProps属性可以给组件的props指定默认值
import PropTypes from 'prop-types'
class Greeting extends React.Component{
render(){
return <div>welcome,{this.props.name}</div>
}
}
Greeting.defaultProps = {
name:'lili'
}