React 组建通信

最新推荐文章于 2025-01-08 09:40:47 发布

RenBaiLi

最新推荐文章于 2025-01-08 09:40:47 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/RenBaiLi/article/details/123895615

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React中如何进行父子组件间的通信。首先展示了父组件如何通过props将订单详情(order)传递给子组件，然后详细讲解了子组件如何通过调用父组件传递过来的回调函数(callback)，更新父组件的状态(msg)，从而实现子组件向父组件传递信息的过程。示例代码包括了父组件和子组件的关键部分，提供了具体的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件通信

<Timer order={order} /> //倒计时组件

在子组件里直接通过props获取父组件传递过来的参数，如下：

let order = this.props.order;//订单详情

子组件向父组件通信

子组件更新组件状态，通过回调函数的方式传递给父组件。
子组件调用父组件通过props传给它的函数更新父组件state，进而完成子组件向父组件的通讯。

先看父组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//导入子组件
import Child from './child.js'; 

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg: '父组件初始msg'
    }
  }

  //父组件回调函数，更新state，进而更新父组件。
  callback=(msg)=>{
    // setState方法,修改msg参数,值是由子组件传过来。
    this.setState({msg});
  }

  render() {
    return (
      <div className="App">
        <p>子组件传值实验: {this.state.msg}</p>
        <Child callback={this.callback} ></Child>
      </div>
    );
  }
}

export default App;

再看子组件

import React from "react";

class Child extends React.Component{
	constructor(props){
      	super(props);
	    this.state={
	    	msg: '子组件msg传值'
	    }
    }
    //通过props调用回调函数传值
    trans=()=>{
        this.props.callback(this.state.msg);
    }
    render(){
        return(
            <div>
                <button onClick={this.trans}>激发trans事件，传值给父组件</button>
            </div>
        )
    }
}

export default Child;