组件的props
- 组件时封闭的，要接受外部数据应该通过props来实现
- props的作用：接收传递给组件的数据
- 传递数据：给组件标签添加属性
接收数据：函数组件通过 参数 props接收数据
类组件通过 this.props接收数据
import React from 'react'
import ReactDOM from 'react-dom'
// 2 接收数据
class Hello extends React.Component {
render() {
// console.log(this.props)
return (
props: {this.props.age}
)
}
}
// 1 传递数据
ReactDOM.render(函数组件获取(props)接收数据
// 2 接收数据
const Hello = props => {
// props是一个对象
console.log(props)
return (
props：{props.name}
)
}
// 1 传递数据
ReactDOM.render(props特点
- 可以给组件传递任意类型的数据
- props是只读
属性，不能对值进行修改 - 注意：使用类组件时，如果写了构造函数，应该将
props传递给super(),否则，无法在构造函数中获取到props，其他的地方是可以拿到的
import React from 'react'
import ReactDOM from 'react-dom'
/*
props
*/
// 类组件：
class Hello extends React.Component {
// 推荐使用props作为constructor的参数！！
constructor(props) {
super(props)
// console.log(this.props)
console.log(props)
}
render() {
console.log('render：', this.props)
return (
props：
)
}
}
/*
const Hello = props => {
console.log('props：', props)
props.fn()
// 修改props的值：错误演示！！！
// props.name = 'tom'
return (
props：
{props.tag}
)
}
*/
ReactDOM.render(
console.log('这是一个函数')}
tag={这是一个p标签
}
/>,
document.getElementById('root')
)
组件通讯的三种方式
1.父组件传递数据给子组件
- 父组件提供要传递的state数据
- 给子组件标签添加属性，值为state中的数据
- 子组件中通过props接收父组件中传递的数据
父组件(自定义属性):
// 父组件
class Parent extends React.Component {
state = {
lastName:'张'
}
render() {
return (
父组件：
)
}
}
子组件接收（props）:
// 子组件
const Child = (props) => {
return (
子组件，接收到父组件的数据：{props.name}
)
}
2.子组件传递数据给父组件
- 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
- 父组件提供一个回调函数，用来接收数据
- 将该函数作为属性的值，传递给子组件
父组件(提供回调函数，用来接收数据)：
class Parent extends React.Component {
state = {
parentMsg: ''
}
// 提供回调函数，用来接收数据
getChildMsg = data => {
console.log('接收到子组件中传递过来的数据：', data)
this.setState({
parentMsg: data
})
}
render() {
return (
父组件：{this.state.parentMsg}
子组件：
class Child extends React.Component {
state = {
msg: '刷抖音'
}
handleClick = () => {
// 子组件调用父组件中传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render() {
return (
子组件：{' '}
)
}
}
兄弟组件传递
- 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
- 这个称为状态提升
- 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
-
要通讯的子组件只需要通过props接收状态或操作状态的方法
image.png
示例:
定义布局结构，一个Counter里面包含两个子组件，一个是计数器的提示，一个是按钮
class Counter extends React.Component {
render() {
return (
计数器：
)
}
}
class Child2 extends React.Component {
render() {
return (
)
}
}
- 步骤一：在父组件里定义共享状态，把这个状态传递给第一个子组件
class Counter extends React.Component {
// 提供共享的状态
state = {
count: 0
}
render() {
return (
{/* 把状态提供给第一个子组件 */}
)
}
}
- 步骤二：在第一个子组件里面就能通过props获取到
class Child1 extends React.Component {
render() {
return (
计数器：{this.props.count}
)
}
}
- 步骤三：在父组件中提供共享方法，通过属性传递给第二个子组件，方便第二个子组件来进行调用
// 提供共享方法
onIncrement = (res) => {
// 只要第二个子组件调用了这个函数，就会执行里面代码
this.setState({
count: this.state.count + res
})
}
render() {
return (
...
{/* 把共享方法提供给第二个子组件 */}
- 步骤四：在第二个子组件里面通过props来获取到对应函数，然后进行调用
class Child2 extends React.Component {
handleClick = () => {
// 这里一旦调用，就会执行父组件里面 onIncrement函数
this.props.onIncrement(2)
}
render() {
return (
)
}
}
Context
如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递
- 作用： 跨组件传递数据
使用步骤
- 1.调用
React.createContext()创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
// 创建context得到两个组件
const { Provider, Consumer } = React.createContext()
- 2.使用Provider 组件作为父节点
- 3.设置value属性，表示要传递的数据
- 4.哪一层想要接收数据，就用Consumer进行包裹，在里面回调函数中的参数就是传递过来的值
{data => 我是子节点 -- {data}}
总结：
- 如果两个组件相隔层级比较多，可以使用Context实现组件通讯
- Context提供了两个组件：Provider 和 Consumer
- Provider组件： 用来提供数据
- Consumer组件： 用来消费数据
props进阶
children属性
- children属性： 表示组件标签的子节点，当组件标签有子节点时，props就会有该属性
- children属性与普通的props一样，值可以使任意值（文本、react元素、组件、甚至是函数）
- 1.children为：文本节点
const App = props => {
console.log(props)
return (
组件标签的子节点：
{props.children}
)
}
ReactDOM.render(我是子节点 , document.getElementById('root'))
console.png
- 2.children为：jsx或组件
const Test = () =>
const App = props => {
console.log(props)
return (
组件标签的子节点：
{props.children}
)
}
ReactDOM.render(
我是子节点，是一个p标签
,
document.getElementById('root')
)
- 3.children 属性
const App = props => {
console.log(props)
props.children()
return (
组件标签的子节点：
{/* {props.children} */}
)
}
ReactDOM.render(
{() => console.log('这是一个函数子节点')} ,
document.getElementById('root')
)
image.png
props校验
- 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
- 如果传入的数据不对，可能会导致报错
- 关键问题：组件的使用者不知道需要传递什么样的数据
-
props校验：允许在创建组件的时候，指定props的类型、格式等
image.png - 1安装包
prop-types (yarn add prop-types | npm i props-types) - 2导入prop-types 包
- 3使用
组件名.propTypes={}来给组件的props添加校验规则
-4 校验规则通过PropTypes对象来指定
// 1.导入包
import PropTypes from 'prop-types'
const App = props => {
const arr = props.colors
const lis = arr.map((item, index) => {item} )
return {lis}
}
// 2.添加props校验
App.propTypes = {
colors: PropTypes.array
}
ReactDOM.render(
常见的约束规则
- 创建的类型：
array、bool、func、number、object、string - React元素类型：
element - 必填项：
isRequired - 特定结构的对象： `shape({})
更多的约束规则
image.png
import PropTypes from 'prop-types'
const App = props => {
return (
props校验：
)
}
// 添加props校验
// 属性 a 的类型： 数值（number）
// 属性 fn 的类型： 函数（func）并且为必填项
// 属性 tag 的类型： React元素（element）
// 属性 filter 的类型： 对象（{area: '上海', price: 1999}）
App.propTypes = {
a: PropTypes.number,
fn: PropTypes.func.isRequired,
tag: PropTypes.element,
filter: PropTypes.shape({
area: PropTypes.string,
price: PropTypes.number
})
}
props的默认值
场景：分页组件 -> 每页显示条数
image.png