React中Provider组件详解(使用场景)
作者：多啦-A萌
这篇文章主要介绍了React中Provider组件使用场景,使用Provider可以解决数据层层传递和每个组件都要传props的问题,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
使用场景
1.A(顶级组件）-》B组件（子组件）-》C组件（孙子组件）
2.A(顶级组件）-》B组件（子组件）、C组件（孙子组件）…很多组件（每个组件都需要传props)
A组件传递数据给C组件实现方式有很多种
1.通过props层层传递到C组件
2.通过全局对象
使用Provider可以解决数据层层传递和每个组件都要传props的问题；
三个嵌套组件：A B C
场景：组件 C 想要取组件A 的属性，一般做法通过A–B–C一层一层传递下来
缺点：使用麻烦，容易出错，中途出错，后续都错
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>
}
}简单实现一个Provider ==》简化属性传递
利用react的context实现一个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认为全局变量不好
static contextTypes = {
store:PropTypes.object.isRequired
};
render(){
return (
<div>
<h1>{this.context.store.info.age}</h1> // 这里直接获取provider提供的属性值
</div>)
}
}到此这篇关于React中Provider组件详解的文章就介绍到这了,更多相关React Provider组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！