React 组件间通信介绍

React 组件间通信方式简介

---

React 组件间通信主要分为以下四种情况：

• 父组件向子组件通信
• 子组件向父组件通信
• 跨级组件之间通信
• 非嵌套组件间通信

下面对这四种情况分别进行介绍：

 

父组件向子组件通信

父组件通过 props 和子组件进行通信，子组件得到 props 后进行相应的操作 
父组件 App.js:

 

1. import React, { Component } from 'react';
2. import './App.css';
3. import Child1 from './Child1';
5. class App extends Component {
6. render() {
7. return (
8. <div className="App">
9. <Child1 content="父组件传递的内容" />
10. </div>
11. );
12. }
13. }
15. export default App;

子组件 Child1.jsx

 

1. import React, { Component } from 'react';
3. class Child1 extends Component {
4. render () {
5. return (
6. <div>
7. 子组件一：{ this.props.content }
8. </div>
9. )
10. }
11. }
13. export default Child1;

 

子组件向父组件通信

和父组件向子组件通信类似，父组件通过传递 props 给子组件，只不过 props 的内容是一个函数，子组件通过调用父组件传递过来的回调函数，将子组件内容传递给父组件。 
父组件 App.js

 

1. import React, { Component } from 'react';
2. import logo from './logo.svg';
3. import './App.css';
4. import Child1 from './Child1';
5. import Child2 from './Child2';
7. class App extends Component {
8. constructor(){
9. super();
10. this.state = {
11. msg:'',
12. }
13. }
14. childMsg(msg){
15. this.setState({
16. msg: msg,
17. })
18. }
19. render() {
20. return (
21. <div className="App">
22. 子组件二传过来的内容：{this.state.msg}
23. <Child2 childMsg={this.childMsg.bind(this)}/>
24. </div>
25. );
26. }
27. }
29. export default App;

子组件 Child2.jsx:

 

1. import React, { Component } from 'react';
3. class Child2 extends Component {
4. msgHandle(){
5. this.props.childMsg(this.refs.input.value);
6. }
7. render () {
8. return (
9. <div>
10. 子组件二：
11. <input type="text" placeholder='请输入内容' ref='input' />
12. <button onClick={this.msgHandle.bind(this)}>点击向父组件传参</button>
13. </div>
14. )
15. }
16. }
18. export default Child2;

 

跨级组件通信

跨级组件是指父组件向子组件的子组件进行通信，或者向更深层次的子组件通信，主要有两种方式：

• 通过 props 层层传递
• 使用 context 对象

对于层级不深的组件（三层以内），可以使用 props 进行层层传递，如果说层级更深的话， 
每一层组件都要去传递 props，并且这些 props 可能不是自身需要的，这就增加了复杂度，这种场景就可以使用 context 进行通信。context 是一个全局变量，相当于一个大容器，我们把要传递的信息放到这个容器里面，不管嵌套层级多深，子组件都可以获取到信息。使用 context 需要满足以下三个条件： 
1、父组件需要声明自己支持 context，并提供 context 对象中属性的 PropTypes 
2、子组件需要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes。 
3、父组件需要提供一个 getChildContext 函数，用来返回一个初始的 context 对象

props 层层传递： 
父组件App.js:

 

1. import React, { Component } from 'react';
2. import logo from './logo.svg';
3. import './App.css';
4. import Child1 from './Child1';
6. class App extends Component {
7. constructor(){
8. super();
9. }
10. render() {
11. return (
12. <div className="App">
13. <Child1 content="父组件传递给孙子组件的内容" />
14. </div>
15. );
16. }
17. }
19. export default App;

Child1.jsx:

 

1. import React, { Component } from 'react';
2. import Child1_1 from './Child1_1';
4. class Child1 extends Component {
5. render () {
6. return (
7. <div>
8. <Child1_1 content={this.props.content}/>
9. </div>
10. )
11. }
12. }
14. export default Child1;

Child1_1.jsx:

 

1. import React, { Component } from 'react';
3. class Child1_1 extends Component {
4. render () {
5. return (
6. <div>
7. 子组件一的子组件：{ this.props.content }
8. </div>
9. )
10. }
11. }
13. export default Child1_1;

context 对象传递 
父组件App.js:

 

1. import React, { Component } from 'react';
2. import logo from './logo.svg';
3. import './App.css';
4. import PropTypes from "prop-types";
5. import Child1 from './Child1';
7. class App extends Component {
8. // 声明支持 context
9. static childContextTypes = {
10. msgs: PropTypes.string,
11. callBack: PropTypes.func,
12. }
13. // 父组件提供一个函数，返回初始的 context 对象
14. getChildContext(){
15. return {
16. msgs:'父组件传递的初始内容',
17. callBack:this.callBack
18. }
19. }
20. callBack(msgs){
21. console.log(msgs);
22. }
24. render() {
25. return (
26. <div className="App">
27. <Child1 />
28. </div>
29. );
30. }
31. }
33. export default App;

子组件 Child1.jsx:

 

1. import React, { Component } from 'react';
2. import Child12 from './Child1_2';
4. class Child1 extends Component {
5. render () {
6. return (
7. <div>
8. <Child12 />
9. </div>
10. )
11. }
12. }
14. export default Child1;

子组件的子组件 Child1_2:

 

1. import React, { Component } from 'react';
2. import PropTypes from 'prop-types';
4. class Child1_2 extends Component {
5. // 子组件声明需要调动 context
6. static contextTypes = {
7. msgs:PropTypes.string,
8. callBack:PropTypes.func
9. }
10. callBack(){
11. this.context.callBack('孙子组件的信息');
12. }
13. render () {
14. return (
15. <div>
16. 子组件一的子组件：{ this.context.msgs }
17. <button onClick={this.callBack.bind(this)}>点击给爷爷组件传递信息</button>
18. </div>
19. )
20. }
21. }
23. export default Child1_2;

 

非嵌套组件间通信

表示没有任何包含关系的组件，主要包括兄弟组件和不在同一个父级中的非兄弟组件。

• 使用共同父组件的 context 对象通信
• 使用自定义事件的方式

对于使用共同父组件 context 的方式会增加子组件和父组件之间的耦合度，对于层级较深的组件找到共同父组件也比较麻烦，但是这种方式可实施。

为了避免父子组件之间的耦合度，我们采用自定义事件的方式： 
需要安装 events 包，使用该模块的自定义事件机制npm i events --save 
在根目录下新建 events.js 文件：

 

1. import { EventEmitter } from 'events';
3. export default new EventEmitter();

父组件 App.js:

 

1. import React, { Component } from 'react';
2. import logo from './logo.svg';
3. import './App.css';
4. import Child1 from './Child1';
5. import Child2 from './Child2';
7. class App extends Component {
8. render() {
9. return (
10. <div className="App">
11. <Child1 />
12. <Child2 />
13. </div>
14. );
15. }
16. }
18. export default App;

子组件 Child1.jsx:

 

1. import React, { Component } from 'react';
2. import emitter from './events';
4. class Child1 extends Component {
5. constructor(props){
6. super(props);
7. this.state = {
8. msg:''
9. }
10. }
11. // 组件挂载完后，声明一个自定义事件
12. componentDidMount(){
13. this.eventEmitter = emitter.addListener('selfEventName',msg => {
14. this.setState({
15. msg: msg
16. })
17. })
18. }
19. // 组件销毁前清除事件监听
20. componentWillUnmount(){
21. emitter.removeListener(this.eventEmitter)
22. }
23. render () {
24. return (
25. <div>
26. 子组件二传递过来的内容：{ this.state.msg }
27. </div>
28. )
29. }
30. }
32. export default Child1;

子组件 Child2.jsx:

 

1. import React, { Component } from 'react';
2. import emitter from './events';
4. class Child2 extends Component {
5. msgHandle(){
6. emitter.emit('selfEventName','自定义事件传参');
7. }
8. render () {
9. return (
10. <div>
11. 子组件二：
12. <button onClick={this.msgHandle.bind(this)}>点击向父组件传参</button>
13. </div>
14. )
15. }
16. }
18. export default Child2;