react中组件通信。props 父与子。示例代码
在React中，常用的组件通信方式
1. 父子组件通信：父组件可以通过props将数据传递给子组件，子组件可以通过props接收父组件传递的数据。这是React中最常见的组件通信方式。
2. 子组件向父组件通信：子组件可以通过props中的回调函数将数据传递给父组件，父组件可以在回调函数中处理接收到的数据。
3. 兄弟组件通信：如果两个兄弟组件没有直接的父子关系，可以通过将它们的共同状态提升到它们的最近共同父组件中，然后通过props将数据传递给兄弟组件。
4. 使用Context API：Context API允许在组件之间共享数据，而不必通过props手动传递。可以在父组件中创建一个Context对象，然后在子组件中通过Context.Provider提供数据，子组件可以通过Context.Consumer或useContext钩子函数来接收数据。
5. 使用全局状态管理库：如果应用程序较大或组件层级较深，并且需要在多个组件之间进行复杂的状态共享和通信，可以使用像Redux、Mobx或React的上下文API的高级版本等全局状态管理库。
context通信https://blog.csdn.net/kkkys_kkk/article/details/135108459?spm=1001.2014.3001.5501
本文介绍父子之间的通信方式和props
目录
父传子组件通信
参考代码
类组件
父组件
子组件
函数组件
props传递
props特点
props的children属性
参考代码
父组件
子组件
通过父传子通信模拟vue中的具名插槽
props属性值验证
示例
props属性值的约束规则
props约束规则示例
props属性的默认值
子传父组件通信
步骤
参考代码
父组件
子组件
父传子组件通信
参考代码
类组件
父组件
// 父组件
// 引入子组件
import Child from './components/Child'
class ParentComponent extends Component {
state = {
msg: "我是来自父组件的数据"
}
render() {
父组件
{/* 1.子组件上绑定自定义属性 */}
子组件
// 子组件
// components/Child.js
import{ Component } from 'react'
class Child extends Component {
render() {
我是子组件
{/* 2. 在子组件中通过this.props来接收传递过来的数据 */}
{ this.props.msg }
}
}如果使用了构造函数，应该将props传递给super，否则无法在构造函数中获取到props
class Child extends Component {
constructor(props) {
// 将props传递给super
super(props)
console.log(props);
}
render() {
return (
我是子组件
{/* 在子组件中通过this.props来接收传递过来的数据 */}
{ this.props.msg }
)
}
}函数组件
function Child(props) {
return (
我是子组件
{ props.msg }
)
}
export default Childprops传递
props特点
1.可以给组件传递任意类型的数据
2.props是只读的对象，只能读取属性的值，无法修改对象
props的children属性
通过props属性模拟vue中的匿名插槽
参考代码
父组件
// 父组件App.js
import { Component } from 'react'
// 引入子组件
import Child from './components/Child'
class App extends Component {
state = {
msg: "我是来自父组件的数据"
}
render() {
return (
父组件
{/* 子组件 */}
我是写在子组件标签元素内的元素
)
}
}
export default App;子组件
import{ Component } from 'react'
class Child extends Component {
render() {
return (
我是子组件
{/*在子组件中通过this.props.children来接收写在子组件标签内的数据*/}
{ this.props.children }
)
}
}
export default Child;通过父传子通信模拟vue中的具名插槽
// 父组件App.js
import { Component } from 'react'
// 引入子组件
import Child from './components/Child'
class App extends Component {
state = {
msg: "我是来自父组件的数据"
}
render() {
return (
父组件
{/* 子组件 */}
//在标签上绑定自定义属性值，值为html标签
左边} right={} />
)
}
}
export default App;props属性值验证
# 使用npm安装
npm i prop-types
# 使用yarn安装
yarn add prop-types2.导入props-types包
3.使用组件名.propsTypes={}来给组件的props添加校验规则
4.校验规则通过 PropTypes 对象来指定
示例
// 1. 导入prop-types第三方包
import propTypes from 'prop-types'
function Child(props) {
return (
子组件
{ props.msg }
)
}
// 2. 通过组件名.props添加校验规则
Child.propTypes = {
// 约束msg的值为string类型
msg: propTypes.string
}
export default Child;props属性值的约束规则
- 常见类型：array、bool、func、number、object、string
- React元素类型：element
- 必填项：isRequired
- 特定结构的对象：shape({ })
props约束规则示例
Child.propTypes = {
// 常见类型
fn: propsType.func,
// 必须填
arr: propType.array.`isRequired`,
// 特定结构的对象
// 要求person必须是一个对象，对象中必须包含name属性和age属性，值分别为string
类型和number类型
perspn: propTypes.shape({
name: propTypes.string,
age: propTypes.number
})
}props属性的默认值
// 1. 引入prop-types第三方包
import propTypes from 'prop-types'
function Child(props) {
return (
子组件
{ props.msg }
)
}
// 2. 通过组件名.props添加校验规则
Child.propTypes = {
// 约束msg的值为string类型
msg: propTypes.string
}
// 3. 给msg属性设置默认值
Child.defaultProps = {
msg: '我是msg的默认值'
}
export default Child;子传父组件通信
步骤
- 在父组件中定义一个回调函数
- 在子组件的标签上定义一个自定义属性，值为定义的回调函数
- 在子组件中通过 this.props 来调用这个函数，并将要传递的数据作为参数传递给该函数
参考代码
父组件
import { Component } from 'react'
// 引入子组件
import Child from './components/Child'
class App extends Component {
state = {
msg: ''
}
render() {
return (
父组件
{ this.state.msg }
{/*2.在子组件的标签上绑定一个自定义属性，值为定义的回调函数*/}
子组件
import { Component } from 'react'
export default class child extends Component {
state = {
msg: "我是来自子组件的数据"
}
render() {
return (
子组件
)
}
handleClick = () => {
// 3.在子组件中通过this.props来调用这个回调函数并将要传递的数据作为参数传递给
该函数
this.props.getChildData(this.state.msg)
}
}