React中如何实现组件间的通信？

最新推荐文章于 2024-01-25 23:22:08 发布

zhaojiaxing123

最新推荐文章于 2024-01-25 23:22:08 发布

阅读量327

点赞数

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

本文链接：https://blog.csdn.net/zhaojiaxing123/article/details/128416996

版权

react.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

React中如何实现组件间的通信？

一.父组件向子组件通讯
二.子组件向父组件通讯
三.跨层级通信
四.消息发布与订阅
五.全局状态管理⼯具

一.父组件向子组件通讯

父组件

import React from 'react'
import Head from './Head'
export default function index() {
  return (
    <div>
      <Head title = "标题" />
    </div>
  )
}

子组件

import React from 'react'
export default function Head(props) {
  return (
    <div>
      这是{props.title}
    </div>
  )
}

二.子组件向父组件通讯

父组件

import React from 'react'
import Head from './Head'
export default function index() {
  function back(msg) {
    console.log(msg);

  }
  return (
    <div>
      <Head back={back.bind(this)} />
    </div>
  )
}

子组件

import React from 'react'

export default function Head(props) {
    function trigger() {
        console.log(props);
        props.back("子传父")
    }
    return (
        <div>
            <button onClick={trigger}>点击我</button>
        </div>
    )
}

三.跨层级通信

React 中使⽤ Context 实现祖代组件向后代组件跨层级传值。

详细介绍点击这里：React的context传值方法介绍

四.消息发布与订阅

1.安装

npm install pubsub-js
yarn add pubsub-js

2.引入

import pubsub from ‘pubsub-js’;

子组件发布

import React from 'react'
import pubsub from 'pubsub-js';
export default function Head() {
    function btnClick(){
        pubsub.publish('name', 'Hello world')//  publish 发布消息 消息名为：name 内容为：Hello world
    }   
    return (
        <div>
            <button onClick={btnClick}>点击我</button>
        </div>
    )
}

父组件订阅

import React, { useState, useEffect } from 'react'
import Head from './Head'
import pubsub from 'pubsub-js';
export default function index() {
  const [data, setData] = useState()
  useEffect(() => {
    // 订阅消息 消息名：name  第二个参数是一个函数
    // 此函数又有两个参数：消息名和消息数据,消息名不可以省略,可以是用_占位
    pubsub.subscribe("name", (_,res) => {
      setData(res)
    })
  }, []) //useEffect第二个参数写一个空数组，表示回调函数只会在第一次渲染页面后执行
  return (
    <div>
      {data}
      <Head></Head>
    </div>
  )
}