快捷導(dǎo)航

React中Provider組件詳解(使用場(chǎng)景)

更新時(shí)間：2024年02月05日 10:34:37 作者：多啦-A萌

這篇文章主要介紹了React中Provider組件使用場(chǎng)景,使用Provider可以解決數(shù)據(jù)層層傳遞和每個(gè)組件都要傳props的問(wèn)題,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

使用場(chǎng)景
1.A(頂級(jí)組件）-》B組件（子組件）-》C組件（孫子組件）
2.A(頂級(jí)組件）-》B組件（子組件）、C組件（孫子組件）…很多組件（每個(gè)組件都需要傳props)
A組件傳遞數(shù)據(jù)給C組件實(shí)現(xiàn)方式有很多種
1.通過(guò)props層層傳遞到C組件
2.通過(guò)全局對(duì)象
使用Provider可以解決數(shù)據(jù)層層傳遞和每個(gè)組件都要傳props的問(wèn)題；

三個(gè)嵌套組件：A B C
場(chǎng)景：組件 C 想要取組件A 的屬性，一般做法通過(guò)A–B–C一層一層傳遞下來(lái)
缺點(diǎn)：使用麻煩，容易出錯(cuò)，中途出錯(cuò)，后續(xù)都錯(cuò)

class A extends React.Component {
  state = { name: 'A'  }
  render(){
    return (
    <div>
        <B name={this.name.name}>
    </div>)
  }
}

// B組件
class Father extends React.Component {
  render(){
    return (
    <div>
        <C age={this.props.name}> 
    </div>)
  } 
}

// C組件
class C extends React.Component {
  render(){
     return (
     <div>
        {this.props.name}
      </div>
  } 
}

簡(jiǎn)單實(shí)現(xiàn)一個(gè)Provider ==》簡(jiǎn)化屬性傳遞
利用react的context實(shí)現(xiàn)一個(gè)provider，任意后代組件可以直接通過(guò)context取到頂級(jí)組件的屬性

// A組件
import Provider from './provider'
import B from './B';
 <Provider info={{name:'max', age: 13}}>
    <B/>
 </Provider>

// 簡(jiǎn)單的Provider組件
import React, { Component,Children } from 'react';
import PropTypes from  "prop-types" 
import A from './A'
export default class Provider extends React.Component {
  static  childContextTypes = {
    store: PropTypes.object.isRequired
  };
  constructor(props){
      super(props)
      this.store = {...props}
  }
  getChildContext(){
    return {store:this.store}
  }
  render(){
      return (
      <div>
          {this.props.children}
      </div>)
  }  
}

 // C組件
import React, { Component } from 'react';
import PropTypes from  "prop-types"
export default class C extends React.Component {
  // 必須要申明，react認(rèn)為全局變量不好
  static  contextTypes = {
    store:PropTypes.object.isRequired
  };
  render(){
      return (
      <div>
          <h1>{this.context.store.info.age}</h1>  // 這里直接獲取provider提供的屬性值
      </div>)
  }
}

到此這篇關(guān)于React中Provider組件詳解的文章就介紹到這了,更多相關(guān)React Provider組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例
下面小編就為大家?guī)?lái)一篇react native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Redux中異步操作處理的具體實(shí)現(xiàn)
在Web應(yīng)用程序中,異步操作是不可或缺的一部分,尤其是在涉及數(shù)據(jù)獲取、狀態(tài)更新等場(chǎng)景, Redux作為React應(yīng)用中流行的可狀態(tài)管理器,提供了處理異步操作的穩(wěn)定解決方案,感興趣的可以了解一下
2025-10-10
如何創(chuàng)建自己的第一個(gè)React 頁(yè)面
React是用于構(gòu)建用戶界面的JavaScript庫(kù)，本文主要介紹了如何創(chuàng)建自己的第一個(gè)React頁(yè)面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化，官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的，總結(jié)來(lái)看，就是更加的方便簡(jiǎn)單了
2022-12-12
react-navigation之動(dòng)態(tài)修改title的內(nèi)容
這篇文章主要介紹了react-navigation之動(dòng)態(tài)修改title的內(nèi)容，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
React?Hook中的useState函數(shù)的詳細(xì)解析
Hook 就是 JavaScript 函數(shù)，這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React?Hook?useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下
2022-10-10
react 實(shí)現(xiàn)圖片正在加載中加載完成加載失敗三個(gè)階段的原理解析
這篇文章主要介紹了react 實(shí)現(xiàn)圖片正在加載中加載完成加載失敗三個(gè)階段的,通過(guò)使用loading的圖片來(lái)占位，具體原理解析及實(shí)現(xiàn)代碼跟隨小編一起通過(guò)本文學(xué)習(xí)吧
2021-05-05
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件
這篇文章主要為大家介紹了react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
手把手教你從零開(kāi)始react+antd搭建項(xiàng)目
本文將從最基礎(chǔ)的項(xiàng)目搭建開(kāi)始講起，做一個(gè)基于react和antd的后臺(tái)管理系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06