每日学习react：了解react中的context和props属性。
context
1. 使用场景
假设一个场景，如果我们想给子孙组件传值，我们该怎么办？
如果一层一层地使用props 传递的话，特别繁琐！
更好的方法：使用context帮助我们跨组件传递数据
2. 使用步骤
调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
const { Provider, Consumer } = React.createContext()
使用 Provider 作为父节点的组件。
<Provider> <div className="App"> <Child1 /> </div> </Provider>
设置 value 属性，表示要传输的数据。
<Provider value="pink">
调用 Consumer 组件接收数据。
<Consumer>
{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>
总结
-
如果两个组件是多层嵌套，可以使用Context实现组件通信
-
Context提供两个组件：Provider和Consumer -
Provider组件：用于提供数据 -
Consumer组件：用于消费数据
props深入
children 属性
children 属性：表示组件标签的子节点。当组件标签有子节点时，props 会有这个属性
children 与普通props一样，属性值可以是任意值(文本、标签、组件甚至函数)
代码如下(示例)：
function Hello(props) {
return (
<div>
组件子节点：{props.children}
</div>
)
}
<Hello>我是子节点</Hello>
props 校验
对组件而言，props 它是一个外部数据容器，不能保证组件用户传输的数据格式
如果输入的数据格式不正确，可能会导致组件内部报错
关键问题：除语法错误信息外，没有额外的错误提示
代码如下(示例)：
// 创建的组件
function App(props) {
const arr = props.colors
const list = arr.map((item, index) => <li key={index}>{item}</li>)
return (
<ul>{list}</ul>
)
}
// 使用组件时
<App colors={19} />
props 校验：允许在创建组件时指定指定 props 类型、格式等。
props验证使用步骤
-
安装 prop-types （npm i prop-types ）
-
导入 prop-types 包
-
使用 组件名.propTypes = {} 将校验规则添加到组件的props中
-
通过验证规则 PropTypes 对象来指定
import PropTypes from 'prop-types'
function App(props) {
return (
<h1>Hi, {props.colors}</h1>
)
}
App.propTypes = {
// 约定colors属性为arraray类型
// 假如类型不对，报告明确的错误，便于分析错误的原因
colors: PropTypes.array
}
props校验约束规则
常见类型： number、 string、 array、bool、func、object
React元素类型：element
必填项：isRequired
特定结构的对象：shape({ })
// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 对象的特定结构
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
Props默认值
场景：分页组件 → 每页显示条数
作用：给 props 设置默认值，未引入 props 时生效
function App(props) {
return (
<div>
这里展示props的默认值：{props.pageSize}
</div>
)
}
// 设置默认值
App.defaultProps = {
pageSize: 10
}
// 不进入pagesize属性
<App />
