react的context和props详解

更新时间：2021年11月10日 10:01:56 作者：<a href="#">leo</a>

这篇文章主要介绍了react的context和props的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

一、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>

3. 总结

如果两个组件是多层嵌套可以使用Context实现组件通讯
Context提供了两个组件：Provider 和 Consumer
Provider组件：用来提供数据
Consumer组件：用来消费数据

二、props深入

1. children 属性

children 属性：表示组件标签的子节点。当组件标签有子节点时，props 就会有该属性

children 属性与普通的props一样，值可以是任意值（文本、标签、组件、甚至是函数）

代码如下（示例）：

function Hello(props) {
  return (
    <div>
      组件的子节点：{props.children}
    </div>
  )
}
<Hello>我是子节点</Hello>

2. 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导致的错误，给出明确的错误提示，增加组件的健壮性

在这里插入图片描述

3. 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属性为array类型
  // 如果类型不对，则报出明确错误，便于分析错误原因
  colors: PropTypes.array
}

4. 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
})

5. props默认值

场景：分页组件 → 每页显示条数

作用：给 props 设置默认值，在未传入 props 时生效

function App(props) {
  return (
    <div>
      此处展示props的默认值：{props.pageSize}
    </div>
  )
}
// 设置默认值
App.defaultProps = {
  pageSize: 10
}
// 不传入pageSize属性
<App />

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

关于react中组件通信的几种方式详解
这篇文章主要给大家介绍了关于react中组件通信的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
React之防止按钮多次点击事件重复提交
这篇文章主要介绍了React之防止按钮多次点击事件重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
ReactJS入门实例教程详解
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点，这篇文章主要介绍了ReactJS入门实例教程,需要的朋友可以参考下
2022-06-06
React拆分窗格组件的两种方法
这篇文章主要介绍了React拆分窗格组件的两种方法,使用第三方库react-split-pane适用于快速实现拆分窗格功能，并且对功能和样式的要求较为简单的场景，本文结合示例代码介绍的非常详细，需要的朋友可以参考下
2023-07-07
如何使用Redux Toolkit简化Redux
这篇文章主要介绍了如何使用Redux Toolkit简化Redux，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04
redux副作用处理之redux-thunk使用
这篇文章主要介绍了redux副作用处理之redux-thunk使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
react 组件传值的三种方法
这篇文章主要介绍了react 组件传值的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
react的context和props详解
这篇文章主要介绍了react的context和props的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-11-11
React中处理表单数据实现方式
本文介绍了如何在React中处理表单数据,包括控制组件和非控制组件的使用,通过控制组件,表单的输入值由React组件的状态控制；非控制组件通过ref来访问表单输入的当前值,文章还展示了如何处理多个输入和添加验证和样式,以提供更好的用户体验
2025-02-02
React项目中使用zustand状态管理的实现
zustand是一个用于状态管理的小巧而强大的库,本文主要介绍了React项目中使用zustand状态管理的实现,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10