组件通信

文章目录

组件通信
- 1 组件的props
- - 1.1 作用
  - 1.2 组件标签属性来传递数据
  - 1.3 函数组件和类组件来接收数据
  - 1.4 props特点
  - 1.5 children属性
  - 1.6 props校验
- 2 父传子
- 3 子传父
- 4 兄弟组件之间传递
- 5 Context

1 组件的props

Props 是组件的配置。

props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。

1.1 作用

接收传递给组件的数据

1.2 组件标签属性来传递数据

通过给组件标签添加属性的方式传递数据。

ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))

1.3 函数组件和类组件来接收数据

props是一个对象。
- 函数组件：通过参数props接收数据。
- 类组件：通过this.props接收数据。

// 1、函数组件接收数据---通过参数props接收
import React from 'react';
import ReactDOM from 'react-dom';const Person = (props) => {console.log(props);return (<div><h1>props:{props.name}</h1><h1>props:{props.age}</h1></div>)
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))

// 2、类组件接收数据---通过this.props接收
import React from 'react';
import ReactDOM from 'react-dom'; class Person extends React.Component {render() {return (<div><h1>类props:{this.props.name}</h1><h1>类props:{this.props.age}</h1></div>)}
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))

1.4 props特点

可以给组件传递任意类型的数据。

字符串、数字、函数、对象、数组、标签

<Person name="Silly" age={21} obj={{ id: 11, name: '狗蛋儿', age: 18 }}friends={['SillyGirl','SillyMan','SillyWoman']}fn={()=>{console.log("函数内打印一句话")}}tag={<p>传递过去一个标签内容</p>}
/>

props是一个只读的对象。

使用类组件时，若也使用了构造函数，那么应该把props传递给super()，不然无法在构造函数中获取到props。

import React from 'react';
import ReactDOM from 'react-dom';// 2、类组件接收数据---通过this.props接收
class Person extends React.Component {constructor(props) {super(props)console.log('构造函数内：', props);}render() {console.log('render内：', this.props);return (<div><h1>类props:{this.props.name}</h1><h1>类props:{this.props.age}</h1></div>)}
}ReactDOM.render(<Personname="Silly"age={21}obj={{ id: 11, name: '狗蛋二', age: 18 }}friends={['SillyGirl', 'SillyMan', 'SillyWoman']}fn={() => { console.log("函数内打印一句话") }}tag={<p>传递过去一个标签内容</p>}/>,document.getElementById('root'))

1.5 children属性

props.children
children属性表示组件标签的子节点。当组件标签中有子节点时，props就会有一个children属性。
children属性与普通props一样，值可以是任意类型。
- 字符串、组件、函数、React元素

class Person extends React.Component {render() {return (<div><h1>props的children属性：{this.props.children}</h1></div>)}
}
ReactDOM.render(<Person>我是子节点</Person>, document.getElementById('root'))

1.6 props校验

props校验：允许在创建组件的时候，指定组件的类型、格式等。
作用：捕获相关错误并作出明确提示，增加组建的健壮性。
- 如不符合校验规则，会报错：Failed prop type:...

使用步骤：

安装prop-types包。

npm install prop-types
//或
yarn add prop-types

导入包。
```
import PropTypes from 'prop-types'
```
使用**组件名.propTypes = {}**给组件添加校验规则。
```
Person.propTypes = {}
```

校验规则通过PropTypes对象来指定。

Person.propTypes = {age:PropTypes.number,name:PropTypes.string
}

约束规则：

常见类型：number、string、object、func、bool、array、symbol
React元素类型：element
设置校验项为必填项：.isRequired
特定结构的对象：PropTypes.shape({ })

Person.propTypes = {age:PropTypes.number,name:PropTypes.string,fn:PropTypes.func.isRequired,tag:PropTypes.element,filterLPropTypes.shape({price:PropTypes.number,name:PropTypes.string})
}

2 父传子

父组件在state里面提供要传递的数据。
在子组件中添加属性，属性值为state里面的待传递值。
子组件通过props接收数据。

import React from 'react';
import ReactDOM from 'react-dom';class Person extends React.Component {state = {userName: 'SillyBoy'}render() {return (<div><p>我是父组件</p><Child name={this.state.userName} /></div>)}
}
const Child = (props) => {return (<div><p>我是子组件</p><span>接收到数据：{props.name}</span></div>)
}ReactDOM.render(<Person />, document.getElementById('root'))

3 子传父

子组件向父组件传递数据的思路为：利用回调函数。

父组件提供回调函数；

子组件来调用，将要传递过去的数据作为回调函数的参数。

父组件提供用于接收数据的回调函数。
父组件将函数作为属性的值，传递给子组件。
子组件通过props调用回调函数。
子组件将要传递的数据作为参数传递给回调函数。

import React from 'react';
import ReactDOM from 'react-dom';//父组件
class Person extends React.Component {state = {parentMsg: ''}getChildMessage = data => {console.log('父组件函数接收子组件传递的值成功！：', data);this.setState({parentMsg: data})}render() {return (<div><p>我是父组件，接收到：{this.state.parentMsg}</p><Child getMsg={this.getChildMessage} /></div>)}
}
//子组件
class Child extends React.Component {state = {msg: '你爱我，我爱你，蜜雪冰城甜蜜蜜'}handlerClick = () => {this.props.getMsg(this.state.msg)}render() {return (<div><p>我是子组件，要传递：{this.state.msg}</p><button onClick={this.handlerClick}>点击传递给父组件</button></div>)}
}ReactDOM.render(<Person />, document.getElementById('root'))

4 兄弟组件之间传递

思想：把共享状态提升到离他们最近的公共父组件内，由父组件来管理此状态。即状态提升。

父组件职责：
1. 提供共享状态
2. 提供操作共享状态的方法
子组件：通过props接收或操作状态。

import React from 'react';
import ReactDOM from 'react-dom';
// import Person from './js/Person'// 公共父组件
class Person extends React.Component {state = {allCount: 0}addNum = () => {this.setState({allCount: this.state.allCount + 1})}render() {return (<div><Child1 count={this.state.allCount} /><Child2 clickIt={this.addNum} /></div>)}
}
// 子组件一
class Child1 extends React.Component {render() {return (<h1>数字：{this.props.count}</h1>)}
}
// 子组件二
class Child2 extends React.Component {render() {return (<button onClick={() => this.props.clickIt()}>加1</button>)}
}ReactDOM.render(<Person />, document.getElementById('root'))

5 Context

若两个组件之间是属于远房亲戚，是多层的嵌套，适合使用此方法来传递数据

作用：跨组件传递数据。

使用步骤：

调用React.createContext()创建Provider和Consumer两个组件。
- Provider：提供数据
- Consumer：消费数据
使用Provider组件作为父组件。
在Provider中设置value属性，表示要传递的值。
调用Consumer组件接收数据。
- Consumer里面是一个特殊的语法，一个有返回值的函数。
- 通过回调函数的参数就能拿到传递过来的数据。

const { Provider,Consumer} = React.createContext()

import React from 'react';
import ReactDOM from 'react-dom';const { Provider, Consumer } = React.createContext()
// 组件之间的父子关系：Person > Father > Son
class Person extends React.Component {render() {return (<Provider value="fa6400"><div><Father /></div></Provider>)}
}class Father extends React.Component {render() {return (<div><Son /></div>)}
}class Son extends React.Component {render() {return (<Consumer>{data => <span>data参数接收到的数据：{data}</span>}</Consumer>)}
}ReactDOM.render(<Person />, document.getElementById('root'))

React React组件之间的通信方式相关推荐

React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
VUE中组件之间的通信方式
目录一.父子组件之间的通信方式 1.props+$emit() 3.$parent+$children 4.provide+inject 5.$attrs+$listeners 6.ref+$ref ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...
vue各组件之间多种通信方式
重点:vue的两大特性是响应式编程和组件化.组件(Component)是 Vue 最核心的功能,但是各个组件实例的作用域是相互独立的,这表明不同组件之间的数据是无法直接相互引用的.如果想要跨组件引用数 ...
react 父子组件之间相互传值
From: https://blog.csdn.net/luzhaopan/article/details/85003362 1.定义父组件 import React, { PureComponent ...
react父子组件之间的传值
父传子------------- 父组件 constructor(props){super(props)this.state={message:"我是父组件传来的"} }rende ...
React的组件中的传值，及context上下文的使用
React的组件之间互相传值父子组件传值兄弟组件传值上下文context 父子组件传值 react 中父组件可以将数据作为子组件的属性进行传值,子组件通过 props 属性接收值. 父组件可以监 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
vue组件之间通信（传值）---8种方式
Vue组件之间的通信方式(个人理解) props(父传子) //父组件 parent.vue<template>//子组件<child-com :num="num" ...

React React组件之间的通信方式

组件通信

文章目录

1 组件的props

1.1 作用

1.2 组件标签属性来传递数据

1.3 函数组件和类组件来接收数据

1.4 props特点

1.5 children属性

1.6 props校验

2 父传子

3 子传父

4 兄弟组件之间传递

5 Context

React React组件之间的通信方式相关推荐

最新文章

热门文章