React教程：父子组件传值（组件通信）

墨蓝 2023-07-08 12:27 14阅读 0赞

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

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过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、子组件传值父组件 ##

子组件通过**调用父组件传递到子组件的方法**向父组件传递消息的。

**完整案例**

子组件 `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、兄弟组件传值 ##

兄弟组件之间的传值，是通过父组件做的中转 ，流程为：

**组件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;