React 组件通信

Posted 2023-04-05 Tone@

父子组件传值

父组件向子组件传值

1、props方法

• 父组件提供要传递的state数据
• 给子组件添加标签属性，值是state中的数据
• 子组件通过props接收父组件传来的数据

class P extends React.Component 
  state = 
    childv: '父组件向子组件传值'
  
  render() 
    return (
      <div>
      <C childValue=this.state.childv />
  </div>
)


class C extends React.Component 
  render() 
    return (
      <div>
      this.props.childValue
  </div>
)


ReactDOM.render(<P />, document.getElementById('root'))

2、原型方法

• 父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。
• 父组件调用子组件的myFunc函数，传递一个参数，子组件接收到参数，打印出参数。
• 参数从父组件传递给子组件，完成了父组件向子组件通信。

import React,  Component, Fragment  from 'react';

class Son extends Component 
    myFunc(name) 
        console.log(name);
    
    render() 
        return <></>;
    


// 父组件
export default class Father extends Component 
    constructor(props) 
        super(props);
        // 创建Ref，并保存在实例属性myRef上
        this.myRef = React.createRef();
    

    componentDidMount() 
        // 调用子组件的函数，传递一个参数
        this.myRef.current.myFunc('Jack');
    
    render() 
        return (
            <>
                <Son ref=this.myRef />
            </>
        );
    

子组件向父组件传值

1、回调函数

总体思路：利用回调函数，父组件提供回调函数，子组件调用，将要传递的数据，作为回调函数的参数

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

class P extends React.Component 
  getMessage = data => 
    console.log('父组件接收数据', data)
  
  render() 
    return (
      <div>
        <C getM=this.getMessage />
      </div>
    )
  

class C extends React.Component 
  state = 
    msg: '子组件向父组件传递数据'
  
  handleMessage = () => 
    this.props.getM(this.state.msg)
  
  render() 
    return (
      <div>
        <button onClick=this.handleMessage>点击</button>
      </div>
    )
  

ReactDOM.render(<P />, document.getElementById('root'))

2、事件冒泡

如下代码，利用了事件冒泡机制，点击子组件的button按钮，事件会冒泡到父组件身上，触发父组件的onClick函数，打印出Jack。

点击的是子组件，父组件执行函数，完成了子组件向父组件通信。

const Son = () => 
    return <button>点击</button>;
;

const Father = () => 
    const sayName = name => 
        console.log(name);
    ;
    return (
        <div onClick=() => sayName('Jack')>
            <Son />
        </div>
    );
;

export default Father;

兄弟组件传值

总体思路：将状态共享，提升到最近的公共父组件中，由父组件管理状态

• 提升公共状态
• 提供操作共享状态的方法

点击按钮，进行计数。按钮进行计数操作,数字进行展示

• 共享状态就是：数字
• 操作共享状态的方法: 点击按钮，进行数字+1

class P extends React.Component 
  //共享状态
  state = 
    count: 0
  
  // 操作共享状态的方法
  add = () => 
    this.setState(
      count: this.state.count + 1
    )
  
  render() 
    return (
      <div>
        <C1 count=this.state.count ></C1>
        <C2 add=this.add ></C2>
      </div>

    )
  

// 数据展示
const C1 = (props) => 
  return (
    <div>props.count</div>
  )


// 逻辑操作
const C2 = (props) => 
  return (
    <div>
      <button onClick=() =>  props.add() >我是按钮+1</button>
    </div>
  )

ReactDOM.render(<P />, document.getElementById('root'))

祖孙组件传值/跨级组件通信

Context 跨组件传递数据

context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到; 但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.

• 调用React.createContext() 创建Provider(提供数据)和Consumer(消费数据)两个组件

const  Provider, Consumer  = React.createContext()  

• 使用Provider组件作为父节点

<Provider>
 <div className="App">
  <Child/>
</Provider>

• 设置value属性，表示要传递的数据

<Provider value="祖组件传递数据">

• 调用Consumer组件接收数据(Consumer组件中，回调函数的参数，就是Provider传递来的参数)

<Consumer>
data => <span>data</span>
</Consumer>

总结

• 父组件向子组件通信: props
• 子组件向父组件通信: 回调函数/自定义事件
• 跨级组件通信: 层层组件传递props/context
• 没有嵌套关系组件之间的通信: 发布订阅模式

React子组件和父组件通信

React子组件和父组件通信

React子组件和父组件通信包括以下几个方面：

1、子组件获取父组件属性：props或者state
2、子组件调用父组件的方法
3、父组件获取子组件的属性：props或者state
4、父组件调用子组件的方法
我们从下面这个例子来详细了解：

父组件：
 1 var Father=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"父组件"
 5         }
 6     },
 7     MakeMoney:function(){ // 挣钱，供子组件调用
 8         alert("我在挣钱!");
 9     },
10     CheckStudy:function(){ // 学习，调用子组件方法
11         this.refs["child"].Study();
12     },
13     getChildName:function(){ // 调用子组件方法获取孩子名字
14         alert(this.refs["child"].getName());
15     },
16     render:function(){
17         
18         return <div>
19                     <button onClick={this.CheckStudy}>监控孩子学习</button>
20                     <button onClick={this.getChildName}>获取孩子名字</button>
21                     <br/>
22                     子组件
23                     <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
24                 </div>;
25     }
26 });

子组件：
 1 var Child=React.createClass({
 2     getDefaultProps:function(){
 3         return {
 4             name:"子组件"
 5         }
 6     },
 7     StudyMakeMoney:function(){ // 学习挣钱，调用父组件方法
 8         this.props.MakeMoney();
 9     },
10     Study:function(){ // 学习，调用子组件方法
11         alert("我在学习！");
12     },
13     getName:function(){// 供父组件调用，返回名字
14         return this.props.name;
15     },
16     render:function(){
17         
18         return <div>父组件名字：{this.props.fatherName}<button onClick={this.StudyMakeMoney}>孩子学习挣钱</button></div>;
19     }
20 });

对应的

1、子组件Child通过父组件传入的name，获取父组件的props
2、子组件Child通过父组件传入的MakeMoney方法调用父组件方法
3、父组件Father，通过ref调用子组件的getName方法，获取props
4、父组件Father,通过ref调用子组件的Study方法