Props属性验证
Props属性验证—> 高级指引 -----> 使用PropsTypes 类型检查
导入插件
import PropTypes from ‘prop-types’;
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// 你可以将属性声明为 JS 原生类型,默认情况下
// 这些属性都是可选的。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何可被渲染的元素(包括数字、字符串、元素或数组)
// (或 Fragment) 也包含这些类型。
optionalNode: PropTypes.node,
// 一个 React 元素。
optionalElement: PropTypes.element,
// 一个 React 元素类型(即,MyComponent)。
optionalElementType: PropTypes.elementType,
// 你也可以声明 prop 为类的实例,这里使用
// JS 的 instanceof 操作符。
optionalMessage: PropTypes.instanceOf(Message),
// 你可以让你的 prop 只能是特定的值,指定它为
// 枚举类型。
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 一个对象可以是几种类型中的任意一个类型
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 可以指定一个数组由某一类型的元素组成
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 可以指定一个对象由某一类型的值组成
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 可以指定一个对象由特定的类型值组成
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
// 你可以在任何 PropTypes 属性后面加上 `isRequired` ,确保
// 这个 prop 没有被提供时,会打印警告信息。
requiredFunc: PropTypes.func.isRequired,
// 任意类型的数据
requiredAny: PropTypes.any.isRequired,
// 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
// 请不要使用 `console.warn` 或抛出异常,因为这在 `onOfType` 中不会起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
// 它应该在验证失败时返回一个 Error 对象。
// 验证器将验证数组或对象中的每个值。验证器的前两个参数
// 第一个是数组或对象本身
// 第二个是他们当前的键。
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.'
);
}
})
};
context 的使用
- 在src下创建文件 ColorContext.js
import {createContext} from "react"
const colorContext = createContext()
export default colorContext
- 在注组件中引入ColorContext.js,并使用
import colorContext from "./ColorContext"
2.1. 在父组件中
将引用的子组件用colorContext.Provider包裹起来,要传递的数据写在标签的value属性中,可以传递对象,用大括号抱起来
import colorContext from "./ColorContext"
render() {
return (
<colorContext.Provider value={{
color:this.state.color,
setColor:val=>{this.setState({color:val})}
}}>
<Two color={this.state.color}></Two>
</colorContext.Provider>
)
}
2.2.1. 在子组件中(类组件和函数式组件都可以用,主要用于函数式组件中)
把要接受数据的部分用colorContext.consume标签抱起来,其内必须是一个函数的形式,通过函数的参数接受传递来的数据
import colorContext from "../ColorContext"
return (
<colorContext.Consumer>
{
val => {
return (
<div style={{background:val.color}}>我是two组件
<button onClick={()=>{val.setColor("blue")}}>更改</button>
</div>
)
}
}
</colorContext.Consumer>
)
2.2.2. 在子组件中(仅类组件能用)
import colorContext from "../ColorContext"
static contextType = colorContext // 指明当前类组件的上下文环境
render(){
console.log(this.context)
return(
<div style={{background:this.context.color}}>
woshi two
</div>
)
}
2.2.3. 函数式组件中的context的简化写法–>hooks–> useContext
使用hooks的useContext来更加方便的获取Provider提供的数据
import React, { Component,useContext } from 'react'
const color = useContext(colorContext)
return(
<div style={{color:color.color}}>
woshi Three
<button onClick={()=>{color.setColor("blue")}}>更改颜色</button>
</div>
)