作者:手机用户2602880745 | 来源:互联网 | 2023-09-14 12:11
一.props用法组件是封闭的,要接收外部数据应该通过props来实现props的作用:接收传递给组件的数据传递数据:给组件标签添加属性接收数据:函数组件通过参数props接收数据
一.props用法
函数组件props用法:
//子组件
function Hello(props) {
console.log(props)
return (
接收到数据:{props.name}
)
}
//父组件
类组件props用法:
//子组件
class Hello extends React.Component {
render() {
return (
接收到的数据:{this.props.age}
)
}
}
//父组件
props的特点:
class Hello extends React.Component {
constructor(props) {
// 推荐将props传递给父类构造函数
super(props)
}
render() {
return
接收到的数据:{this.props.age}
}
}
props组件深入:
1.children属性:
描述:表示该组件的子节点,只要组件有子节点,props就有该属性。
注意:children 属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)
function Hello(props) {
return (
该组件的子节点:{props.children}
)
}
我是子节点 2.props校验
- 目的:校验接收的props的数据类型,增加组件的健壮性
- 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据
- 如果传入的数据格式不对,可能会导致组件内部报错。组件的使用者不能很明确的知道错误的原因。
- props校验允许在创建组件的时候,就约定props的格式、类型等
使用步骤:
安装包 prop-types (yarn add prop-types / npm i props-types)
导入 prop-types 包
使用组件名.propTypes = {} 来给组件的props添加校验规则
校验规则通过 PropTypes 对象来指定
import PropTypes from 'prop-types'
function App(props) {
return (
Hi, {props.colors}
)
}
App.propTypes = {
// 约定colors属性为array类型
// 如果类型不对,则报出明确错误,便于分析错误原因
colors: PropTypes.array
}
约束规则:
常见类型:array、bool、func、number、object、string
React元素类型:element
必填项:isRequired
特定结构的对象:shape({ })
3.props默认值
给 props 设置默认值,在未传入 props 时生效
function App(props) {
return (
此处展示props的默认值:{props.pageSize}
)
}
// 设置默认值
App.defaultProps = {
pageSize: 10
}
// 不传入pageSize属性
二.组件通讯
组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能 拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据 。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。
2.1组件通讯三种方式
2.2.1 父传子
父组件提供要传递的state数据
给子组件标签添加属性,值为 state 中的数据
子组件中通过 props 接收父组件中传递的数据
//父组件提供数据并且传递给子组件
class Parent extends React.Component {
state = { lastName: '王' }
render() {
return (
传递数据给子组件:
)
}
}
//子组件接收数据
function Child(props) {
return
子组件接收到数据:{props.name}
}
2.2.2 子传父
父组件提供一个回调函数(用于接收数据)
将该函数作为属性的值,传递给子组件
子组件通过 props 调用回调函数
将子组件的数据作为参数传递给回调函数\
// 父组件提供函数并且传递给子组件
class Parent extends React.Component {
getChildMsg = (msg) => {
console.log('接收到子组件数据', msg)
}
render() {
return (
子组件:
)
}
}
//子组件接收函数并且调用
class Child extends React.Component {
state = { childMsg: 'React' }
handleClick = () => {
this.props.getMsg(this.state.childMsg)
}
return (
)
}
2.2.3 非父子
2.2 跨组件通讯-context
实现步骤:
1.调用 React. createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件。
const { Provider, Consumer } = React.createContext()
2.使用 Provider 组件作为父节点。
3.设置 value 属性,表示要传递的数据。
4.调用 Consumer 组件接收数据。
{data => data参数表示接收到的数据 -- {data}}
总结:
如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯
Context提供了两个组件:Provider 和 Consumer
Provider组件:用来提供数据
Consumer组件:用来消费数据