React组件通信（父子组件传值）

偏执的太偏执、 2023-07-19 15:27 89阅读 0赞

## 1、父组件传值子组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]  
在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。

父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。

父组件代码片段：

constructor(props){ 
        super(props)
        this.state={ 
          message:"i am from parent"
        }
      }
      render(){ 
        return(
              <Child txt={ this.state.message}/>
        )
      }
    }

子组件代码片段：

render(){ 
        return(
              <p>{ this.props.txt}</p>
        )
    }

**完整示例**

创建父组件 `index.js`

import React from 'react';
    import ReactDOM from 'react-dom';
    import User from './User';//引入子组件
    
    //定义数据
    const person = { 
        name: 'Tom',
        age:20
    }
    
    ReactDOM.render(
        //渲染子组件，并向子组件传递name,age属性
        <User name={ person.name} age={ person.age}></User>
        , document.getElementById('root'));

创建子组件 `User.js`

import React from 'react';
    
    class User extends React.Component{ 
        render(){ 
            return (
                // 使用props属性接收父组件传递过来的参数
                <div>{ this.props.name}，{ this.props.age}</div>
            );
        }
    }
    
    export default User;

在父组件中可以使用展开运算符 `...` 传递对象

`index.js`文件

ReactDOM.render(
        //渲染子组件，并向子组件传递name,age属性
        <User { ...person}></User>
        , document.getElementById('root'));

`User.js`文件

render(){ 
       return (
           // 使用props属性接收父组件传递过来的参数
           <div>{ this.props.name}，{ this.props.age}</div>
       );
    }

## 2、子组件传值父组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 1]  
子组件通过**调用父组件传递到子组件的方法**向父组件传递消息的。

**完整案例**

子组件 `Son.js` 文件代码示例：

import React from 'react';
    
    class Son extends React.Component { 
        //构造方法
        constructor(){ 
            super();
            this.state = { 
                inputValue:''
            }
        }
        //按钮点击事件
        handleClick(){ 
            //通过props属性获取父组件的getdata方法，并将this.state值传递过去
            this.props.getdata(this.state.inputValue);
        }
        //输入框事件，用于为this.state赋值
        handleChange(e){ 
            this.setState({ 
                inputValue: e.target.value
            });
        }
    
        render(){ 
            return (
                <React.Fragment>
                    <input onChange={ this.handleChange.bind(this)}></input>
                    <button onClick={ this.handleClick.bind(this)}>点击获取数据</button>
                </React.Fragment>
            );
        }
    
    }
    
    export default Son;

父组件 `Parent.js` 文件代码示例：

import React from 'react';
    import Son from './Son';
    
    class Parent extends React.Component { 
        //构造方法
        constructor(){ 
            super();
            this.state = { 
                mess: '' //初始化mess属性
            }
        }
        //用于接收子组件的传值方法，参数为子组件传递过来的值
        getDatas(msg){ 
            //把子组件传递过来的值赋给this.state中的属性
            this.setState({ 
                mess: msg
            });
        }
    
        render(){ 
            return (
                <React.Fragment>
                    { /* 渲染子组件，设置子组件访问的方法， getdata属性名为子组件中调用的父组件方法名 */}
                    <Son getdata={ this.getDatas.bind(this)}></Son>
                    <div>展示数据：{ this.state.mess}</div>
                </React.Fragment>
            );
        }
    
    }
    
    export default Parent;

入口文件 `index.js`示例代码：

import React from 'react';
    import ReactDOM from 'react-dom';
    import Parent from './Parent';
    
    ReactDOM.render(<Parent></Parent>, document.getElementById('root'));

## 3、兄弟组件传值 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 2]  
兄弟组件之间的传值，是通过父组件做的中转 ，流程为：

**组件A** – `传值` \--> **父组件** – `传值` \--> **组件B**

代码示例：

创建 `Acls.js` 组件，用于提供数据

import React from 'react';
    
    class Acls extends React.Component { 
    	//按钮点击事件，向父组件Pcls.js传值
        handleClick(){ 
            this.props.data("hello...React...");
        }
    
        render(){ 
            return (
                <button onClick={ this.handleClick.bind(this)}>Acls组件中获取数据</button>
            );
        }
    }
    
    export default Acls;

创建父组件 `Pcls.js` 用于中转数据

import React from 'react';
    import Acls from './Acls';
    import Bcls from './Bcls';
    
    class Pcls extends React.Component { 
    	//构造函数
        constructor(){ 
            super();
            this.state = { 
                mess: ''
            }
        }
    	//向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
        getDatas(data){ 
            this.setState({ 
                mess: data
            });
        }
    
        render(){ 
            return (
                <React.Fragment>
                    Pcls组件中显示按钮并传值：
                    <Acls data={ this.getDatas.bind(this)}></Acls>
                    <Bcls mess={ this.state.mess}></Bcls>
                </React.Fragment>
            );
        }
    }
    
    export default Pcls;

创建子组件 `Bcls.js` 用于展示从 `Acls.js` 组件中生成的数据

import React from 'react';
    
    class Bcls extends React.Component { 
    
        render(){ 
            return (
                <div>在Bcls组件中展示数据：{ this.props.mess}</div>
            );
        }
    }
    
    export default Bcls;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]: /images/20230528/14ba0549ed2c4df8a8bf67a4071f3e16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 1]: /images/20230528/a700e1953e5548ea9840aff8ebe6935b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 2]: /images/20230528/9a4a5c76767841efa0c1131f3797d8fb.png