在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
目录
父传子组件通信
参考代码
类组件
父组件
// 父组件
// 引入子组件
import Child from './components/Child'
class ParentComponent extends Component {
state = {
msg: "我是来自父组件的数据"
}
render() {
<div id="app" className="app-root">
<h1>父组件</h1>
<hr />
{/* 1.子组件上绑定自定义属性 */}
<Child msg={ this.state.msg } />
</div>
}
}
子组件
// 子组件
// components/Child.js
import{ Component } from 'react'
class Child extends Component {
render() {
<div>
<h1>我是子组件</h1>
{/* 2. 在子组件中通过this.props来接收传递过来的数据 */}
<div>{ this.props.msg }</div>
</div>
}
}
如果使用了构造函数,应该将props传递给super,否则无法在构造函数中获取到props
class Child extends Component {
constructor(props) {
// 将props传递给super
super(props)
console.log(props);
}
render() {
return (
<div>
<h1>我是子组件</h1>
{/* 在子组件中通过this.props来接收传递过来的数据 */}
<div>{ this.props.msg }</div>
</div>
)
}
}
函数组件
function Child(props) {
return (
<div>
<h1>我是子组件</h1>
<div>{ props.msg }</div>
</div>
)
}
export default Child
props传递
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 (
<div id="app" className="app-root">
<h1>父组件</h1>
<hr />
{/* 子组件 */}
<Child>
<div>
<h3>我是写在子组件标签元素内的元素</h3>
</div>
</Child>
</div>
)
}
}
export default App;
子组件
import{ Component } from 'react'
class Child extends Component {
render() {
return (
<div>
<h1>我是子组件</h1>
{/*在子组件中通过this.props.children来接收写在子组件标签内的数据*/}
<div>{ this.props.children }</div>
</div>
)
}
}
export default Child;
通过父传子通信模拟vue中的具名插槽
// 父组件App.js
import { Component } from 'react'
// 引入子组件
import Child from './components/Child'
class App extends Component {
state = {
msg: "我是来自父组件的数据"
}
render() {
return (
<div id="app" className="app-root">
<h1>父组件</h1>
<button>点击</button>
<hr />
{/* 子组件 */}
//在标签上绑定自定义属性值,值为html标签
<Child left={<button>左边</button>} right={<button> 右边</button>} />
</div>
)
}
}
export default App;
props属性值验证
# 使用npm安装
npm i prop-types
# 使用yarn安装
yarn add prop-types
2.导入props-types包
3.使用组件名.propsTypes={}来给组件的props添加校验规则
4.校验规则通过 PropTypes 对象来指定
示例
// 1. 导入prop-types第三方包
import propTypes from 'prop-types'
function Child(props) {
return (
<div>
<h1>子组件</h1>
<span>{ props.msg }</span>
</div>
)
}
// 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 (
<div>
<h1>子组件</h1>
<span>{ props.msg }</span>
</div>
)
}
// 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 (
<div id="app" className="app-root">
<h1>父组件</h1>
<div>{ this.state.msg }</div>
<hr />
{/*2.在子组件的标签上绑定一个自定义属性,值为定义的回调函数*/}
<Child getChildData={ this.getChildData } />
</div>
)
}
// 1. 在父组件中定义一个回调函数
getChildData = value => {
console.log(value); // 在控制台打印出子组件传递过来的数据
}
}
export default App;
子组件
import { Component } from 'react'
export default class child extends Component {
state = {
msg: "我是来自子组件的数据"
}
render() {
return (
<div>
<h1>子组件</h1>
<button onClick={ this.handleClick }>点击我</button>
</div>
)
}
handleClick = () => {
// 3.在子组件中通过this.props来调用这个回调函数并将要传递的数据作为参数传递给
该函数
this.props.getChildData(this.state.msg)
}
}