腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

詳解React?hooks組件通信方法

更新時(shí)間：2022年07月26日 14:08:33 作者：曲鳥(niǎo)

這篇文章主要介紹了React?hooks組件通信,在開(kāi)發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下

一、前言

組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，下面列舉一下 react hooks中常用的父子、跨組件通信的方法

二、父子組件通信

1）父組件傳值給子組件

子組件代碼:

//子組件
const Child = ({ param1, param2 }) => {
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

param1、param2 為子組件接收父組件的傳參，父組件代碼如下：

父組件代碼

//父組件
const Parent = () => {
  return <Child //子組件
    params1="1"
    params2="2"
  />
}

運(yùn)行效果

2）子組件傳值給父組件

子傳父嚴(yán)格來(lái)講還是父?jìng)髯?，父組件傳遞給子組件ref，子組件將想要暴露給父組件的值放在上面，然后父組件就可以使用其值：

首先需要導(dǎo)入對(duì)應(yīng)的模塊包useImperativeHandle、useRef,forwardRef ：

import React, { useRef, useImperativeHandle, useEffect, forwardRef } from 'react';

父組件代碼

//父組件

const Parent = () => {//父組件
  const ref = useRef(); //ref
  useEffect(() => {
    console.log(ref)
  }, [])
  return (
    <Child //子組件
      ref={ref} //將ref傳遞給子組件
    />)
}

子組件代碼

//子組件
const Child = forwardRef(({ },ref) => {
  useImperativeHandle(ref, () => ({
    data: '我是子組件'
  }));
  return <>我是子組件</>
})

運(yùn)行后控制臺(tái)輸出

{
   "current": {
       "data": "我是子組件"
   }
}

3）跨組件傳值（父?jìng)鲗O子組件）

跨組件傳值我們頁(yè)可以使用最開(kāi)始介紹的父?jìng)髯拥姆椒ǎ粚訉拥那短讉鬟f，例如：

const Parent = () => {
  return <Child1 //子組件
    param1="1"
    param2="2"
  />
}
//子組件
const Child1 = ({ param1, param2 }) => {
  return <Child2 param1={param1} param2={param2} />
}
//子子組件
const Child2 = ({ param1, param2 }) => {
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

但如果有更多層嵌套時(shí)，一層層的傳遞會(huì)顯得很冗余和麻煩，所以我們可以使用context來(lái)解決這個(gè)問(wèn)題。

在項(xiàng)目目錄創(chuàng)建一個(gè)context.js文件用于創(chuàng)建我們的context，代碼如下：

import { createContext } from 'react'
const myContext = createContext(null)
export default myContext

然后在我們組件文件中引入我們定義的myContext，并引入react對(duì)應(yīng)包:

import React, { useContext } from 'react';
import myContext from './context'

父組件代碼

const Parent = () => {
  //使用Provider傳遞值
  return <myContext.Provider value={{ param1: "1", param2: "2" }}>
    <Child1 />
  </myContext.Provider>
}

子組件和子子組件代碼

//子組件無(wú)需改動(dòng)
const Child1 = () => {
  return <Child2 />
}
//子子組件
const Child2 = () => {
  //通過(guò)useContext獲取父組件的值
  const { param1, param2 } = useContext(myContext)  
  return <>父組件傳遞的參數(shù)：{param1},{param2}</>
}

運(yùn)行效果