【React】8props的children、校验、默认值

• children 属性&＃xff1a;表示组件标签的子节点。当组件标签有子节点时&＃xff0c;props就会有该属性。
• chidren 属性与普通的props一样&＃xff0c;值可以是任意值&＃xff08;文本、React元素、组件&＃xff0c;甚至是函数&＃xff09;

demo&＃xff1a;

import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom/client&＃39;//组件1
class User extends React.Component {render() {return (// 传入非函数children// hello// hello//传入函数children<Node1>{() &＃61;> console.log("函数1")}</Node1>)}
}//组件
const Node1 &＃61; (props) &＃61;> {//使用函数childrenprops.children()return (//使用非函数children//

效果&＃xff1a;

使用步骡

1. 安装包 prop-types ( yarn add prop-types / npm i prop-types )
2. 导入 prop-types包&＃xff0c;import PropTypes from &＃39;prop-types&＃39;&＃xff1b;
3. 使用组件名.propTypes &＃61;{} 来给组件的props添加校验规则
4. 按验规见面过 PropTypes象来指定

import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom/client&＃39;
//导入校验包
import PropTypes from &＃39;prop-types&＃39;//组件
const Node1 &＃61; (props) &＃61;> {console.log(props)return (<div>node1--{props.colors[0]}</div>)
}//添加校验规则
Node1.propTypes &＃61; {colors: PropTypes.array
}const root &＃61; ReactDOM.createRoot(document.getElementById("root"))
// root.render()
root.render(<Node1 colors&＃61;{"qq"} />)}


效果&＃xff1a;
传入错误参数时&＃xff0c;会提示类型错误

常用验证规则&＃xff1a;
若是必填则后面加.isRequired

MyComponent.propTypes &＃61; {// You can declare that a prop is a specific JS primitive. By default, these// are all optional.optionalArray: PropTypes.array,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol,// Anything that can be rendered: numbers, strings, elements or an array// (or fragment) containing these types.
//验证是否为节点optionalNode: PropTypes.node,//验证是否为元素// A React element (ie. ).optionalElement: PropTypes.element,//验证是否为元素类型// A React element type (ie. MyComponent).optionalElementType: PropTypes.elementType,//验证是否为另一个类的实例// You can also declare that a prop is an instance of a class. This uses// JS&＃39;s instanceof operator.optionalMessage: PropTypes.instanceOf(Message),//验证传入值是否在给定范围// You can ensure that your prop is limited to specific values by treating// it as an enum.optionalEnum: PropTypes.oneOf([&＃39;News&＃39;, &＃39;Photos&＃39;]),//验证传入类型是否在给定范围// An object that could be one of many typesoptionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]),// An array of a certain typeoptionalArrayOf: PropTypes.arrayOf(PropTypes.number),// An object with property values of a certain typeoptionalObjectOf: PropTypes.objectOf(PropTypes.number),// You can chain any of the above with &＃96;isRequired&＃96; to make sure a warning// is shown if the prop isn&＃39;t provided.// An object taking on a particular shapeoptionalObjectWithShape: PropTypes.shape({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired}),// An object with warnings on extra propertiesoptionalObjectWithStrictShape: PropTypes.exact({optionalProperty: PropTypes.string,requiredProperty: PropTypes.number.isRequired}),requiredFunc: PropTypes.func.isRequired,// A value of any data typerequiredAny: PropTypes.any.isRequired,// You can also specify a custom validator. It should return an Error// object if the validation fails. Don&＃39;t &＃96;console.warn&＃96; or throw, as this// won&＃39;t work inside &＃96;oneOfType&＃96;.
//回调函数&＃xff1a;自定义验证规则customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error(&＃39;Invalid prop &＃96;&＃39; &＃43; propName &＃43; &＃39;&＃96; supplied to&＃39; &＃43;&＃39; &＃96;&＃39; &＃43; componentName &＃43; &＃39;&＃96;. Validation failed.&＃39;);}},// You can also supply a custom validator to &＃96;arrayOf&＃96; and &＃96;objectOf&＃96;.// It should return an Error object if the validation fails. The validator// will be called for each key in the array or object. The first two// arguments of the validator are the array or object itself, and the// current item&＃39;s key.customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {if (!/matchme/.test(propValue[key])) {return new Error(&＃39;Invalid prop &＃96;&＃39; &＃43; propFullName &＃43; &＃39;&＃96; supplied to&＃39; &＃43;&＃39; &＃96;&＃39; &＃43; componentName &＃43; &＃39;&＃96;. Validation failed.&＃39;);}})
};

3. props默认值

指定 props 的默认值&＃xff0c; 这个方法只有浏览器编译以后才会生效

class HandsomeBoy extends Component{// 设置默认值//defaultProps 可以为 Class 组件添加默认 props,基于 static 的写法static defaultProps &＃61; {name:&＃39;pyq&＃39;}constructor(props){super(props)}render(){return <section>{this.props.name}</section>}
}


指定 props 的默认值&＃xff0c;这个方法会一直生效

class Age extends Component{render(){return <section>{this.props.name}</section>}
}
// 默认值的第二种,指定 props 的默认值&＃xff0c;这个方法会一直生效
Age.defaultProps &＃61; {name:18
}