日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

詳解React?hooks組件通信方法_React

作者：曲鳥 ? 更新時(shí)間： 2022-09-18 編程語言

一、前言

組件通信是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)格來講還是父?jìng)髯樱附M件傳遞給子組件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子組件）

跨組件傳值我們頁可以使用最開始介紹的父?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來解決這個(gè)問題。

在項(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>
}

子組件和子子組件代碼

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

運(yùn)行效果

原文鏈接：https://blog.csdn.net/momoda118/article/details/125988039

欄目分類
最近更新