react组件通信

最新推荐文章于 2025-07-23 16:27:32 发布

Nikki_u

最新推荐文章于 2025-07-23 16:27:32 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/125041652

博客围绕React组件通信展开，指出组件数据默认自身可用，要实现共享需进行组件通信。介绍了父传子、子传父、兄弟组件通信、跨组件通信等方式，还提及了children属性，给出了部分通信步骤示例。

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

因为组件数据默认自身才能使用，要实现组件的数据共享，就需要组件通信

import { Component } from "react";

// 给函数组件通信
const Home= (props)=>{
    console.log(props);/////////////接收数据
    return <div>Home组件-</div>
}

class Home1 extends Component{
    render(){
        console.log(this.props);/////////////接收数据
        return (
            <div>Home1组件--</div>
        )
    }
}

export default class App extends Component{
    render(){
        return (
            <>
            <Home name='kki' age='18'></Home>
            <Home1 name='kki' age='18'></Home1>
            </>
        )
    }
}

父传子

import { Component } from "react";
class Parent extends Component{
    state={
        name:'yy',
        age:90
    }
    render(){
        const {name,age}=this.state
        return (
            <>
            <div>我是父组件</div>
            <Child name={name} age={age} hh={88}></Child>
            </>
        )
    }
}
class Child extends Component{
    render(){
        const {name,age,hh}=this.props
        return (
            <div>我是子组件--{name}--{age}--{hh}</div>
        )
    }
}
export default Parent

子传父

<Child barginP={this.bargin} key={item.id} {...item}></Child>//父

  bargin = (id, price) => {
   console.log(id)
   console.log(price)
  }//父

<button onClick={this.bargin}>关公大砍刀</button>//子

  bargin = () => {
    const { id, barginP } = this.props
    let barginPrice = +(Math.random() * 10).toFixed(2)
    barginP(id, barginPrice)
  }//子

兄弟组件通信

父传子(parent=>Rose)+子传父(Jack=>parent)

第一步：父传子

<Rose msg={this.state.msg}></Rose>

//rose组件
const Rose=(props)=>(
  <>
  <p>我是rose--{props.msg}</p>
  </>
)

第二步：子传父

//jack组件
const Jack=(props)=>(
  <>
  <p>我是jack</p>
  <button onClick={()=>props.changeMsg('小王子')}>点击切换</button>
  </>
)

  changeMsg=(p)=>{
    // console.log(p);
    this.setState({
      msg:p
    })
  }

跨组件通信

引入组件通信所需要的函数

import { createContext } from 'react'
const {Provider,Consumer} =createContext()

用Provider包裹父组件，并传入值

<Provider value={this.state.msg}>
<Jack></Jack>
</Provider>

组件层级顺序App=>Jack=>Rose=>Prince

再Prince中接收数据

const Prince=()=>(
  <Consumer>
    {msg=><p>我是小王子---{msg}</p>}
  </Consumer>
)

children属性

// import { Component } from "react";

const Home = (props) => {
  // props.children('炸鸡')
  return (
    <>
      {/* <span>{props.children}</span> */}
      <span>{props.children('炸鸡')}</span>
      {/* <span></span> */}
    </>
  )
}

const Great = () => {
  return (
    <>
      {/* <Home>我是great</Home>
      <br />
      <Home>
        <span>我是span</span>
        <button>确定</button>
      </Home> */}
      <Home>
        {
          str=>'我在人民广场吃'+str
        }
      </Home>
      <Home>
        {
          str=>console.log('我在人民广场吃',str)
        }
      </Home>
    </>
  )
}

export default Great