umi搭建react+antd项目（六）父子组件通讯

最新推荐文章于 2025-06-25 14:20:24 发布

原创

最新推荐文章于 2025-06-25 14:20:24 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍如何在React应用中实现父子组件之间的通讯，通过一个具体的例子展示了在子组件中修改父组件数据的方法，包括在父组件定义更新方法并传递给子组件，以及子组件调用该方法来改变父组件的状态。

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

上一篇写了一个子组件，只是把值传入进来，这篇讲解在子组件修改父组件的数据

1.在index.js里，新增方法：updateImg 用于修改list集合

  updateImg() {
    this.setState({
      list: [
        {
          "src": "http://dummyimage.com/468x60"
        }
      ]
    });
  }

在子组件上传入该方法：

<ListComponent updateImg={this.updateImg.bind(this)} list={this.state.list}/>

完整代码：

import React, {Component} from 'react';
import Link from 'umi/link';
import instance from '../conf/axiosConf';
import ListComponent from '../component/list'

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentDidMount() {
    instance.get("api/img").then(data => {
      this.setState({list: data.list});
    })
  }

  updateImg() {
    this.setState({
      list: [
        {
          "src": "http://dummyimage.com/468x60"
        }
      ]
    });
  }