快捷導(dǎo)航

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

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

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

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

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

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>
  } 
}

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

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

// 簡單的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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: