React子组件给父组件传值，父组件引用子组件并给子组件传值

最新推荐文章于 2025-04-09 08:00:00 发布

a_靖

最新推荐文章于 2025-04-09 08:00:00 发布

阅读量3.6k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_35713752/article/details/103280567

版权

Ant Design Pro 教程专栏同时被 3 个专栏收录

40 篇文章 ¥49.90 ¥99.00

订阅专栏

Web前端

406 篇文章

订阅专栏

react

48 篇文章

订阅专栏

这篇博客通过一个React示例展示了如何实现在父组件中引用子组件，同时子组件能将选择的值传递回父组件，以根据筛选条件动态更新视图。具体实现包括一个封装的折线图组件，配合Ant Design Pro的下拉框，用户选择后，子组件将storeId发送给父组件进行视图刷新。

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

本博客代码是 React 父组件和子组件相互传值的 demo；实现封装一个折线图，折线图选择下拉框，获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图；效果图如下：

父组件代码：

代码解析：父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件，并且接收子组件传递给父组件的 storeId ;

import React, { Component } from 'react';
import Sub from './components/Sub';

class Parent extends Component {
  state = {
    list:[{'storeId':1,'name':'li'},{'storeId':2,'name':'jay'}],
  };

  storeId=(value)=> {
    console.log('子组件传递给父组件的值',value)
  }
  render() {
    return (
      <div>

了解本专栏