react中组件间传值

最新推荐文章于 2025-05-16 16:20:07 发布

drunk喵咪

最新推荐文章于 2025-05-16 16:20:07 发布

阅读量798

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/jdrunk/article/details/109526981

react 专栏收录该内容

21 篇文章

订阅专栏

本文介绍React中不同组件间的传值方法，包括子组件向父组件传递数据及同级组件间的数据交互方式。通过实例展示了如何利用状态管理和回调函数实现这些功能。

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

子组件Children传值(msg)给父组件Parent
父组件

import React  ,{useState}from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './Welcome.less';
import Child from './Child';

export default (): React.ReactNode => {
  const [msg,setMsg] = useState('父组件传值给子组件')
  const [childMsg,setChildMsg] = useState('')

  const getChildrenMsg = (msg:any) => {
    setChildMsg(msg)
  }
    return (
      <PageHeaderWrapper content=" 这个页面只有 admin 权限才能查看">
        <div className={styles.content}>
          <h2>{msg}</h2>
          <hr/>
          <Child getChildrenMsg = {getChildrenMsg.bind(this)}/>
          <h2>子组件的值：{childMsg}</h2>
        </div>
      </PageHeaderWrapper>
    )
}

子组件

import React, {useState} from 'react'
import { Button} from 'antd';

export default function Child(props:any){
    const [msg,setMsg] = useState('子组件给父组件传值') 
    console.log('props',props)

    const toParent = ()=>{
        props.getChildrenMsg(msg)
    }

    return (
        <div>
            <h2>{ msg }</h2>
            <Button onClick={toParent}>传值</Button>
        </div>
    )
    
}

在这里插入图片描述
同级组件之间传值
同一父组件下平级组件间传值，简单一句话子组件先传给父组件，父组件再传给那个子组件

// 处理平级组件间传值 ，先传给父组件，父组件再传给另一个组件
class Child1 extends React.Component {
    constructor (props) {
      super(props);
 
    }
    handleClick() {
      this.props.changeChild2Color('yellow')
    }
 
    render() {
      return (
        <div>
            <h1>Child1：  {this.props.bgColor}</h1>
            <button onClick={(e) => this.handleClick(e)}>向Child2传值，改变其颜色</button>
        </div>
      );
    }
}
class Child2 extends React.Component {
    constructor (props) {
      super(props);
    }
 
    render() {
      return (
        <div style={{background:this.props.bgColor}}>
            <h1>Child2：  {this.props.bgColor}</h1>
        </div>
      );
    }
}
class Father extends React.Component {
    constructor (props) {
      super(props);
      this.state={
        child2BgColor: '#999'
      };
    }
    onChild2BgColorChange(color) {
      this.setState({
        child2BgColor: color
      })
    }
    render() {
      return (
        <div>
          {/* 平级组件间传值*/}
          <Child1 changeChild2Color={(color)=>{this.onChild2BgColorChange(color)}}></Child1>
          <Child2 bgColor={this.state.child2BgColor}></Child2>
        </div>
      );
    }
}
ReactDOM.render(
  <div>
    <Father></Father>
  </div>,
  document.getElementById('app')
);