组件的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‘ }
时间: 2024-11-04 00:48:07