web前端全系列 教程
1839个小节阅读:2243.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
React组件中数据是通过 props 属性自上而下(由父及子)进行传递的,但是有的时候中间的一些组件可能并不需要props的值。
//App.js
return (
<div>
<ContextTest />
</div>
);
x//ContextTest.js
import React from 'react'
import NavBar from './NavBar'
export default class ContextTest extends React.Component{
constructor(props){
super(props)
this.state={user:{name:'百战',account:'baizhan'}}
}
render(){
return <div>
<NavBar user={this.state.user}/>
</div>
}
}
xxxxxxxxxx
//NavBar.js
import React, { Component } from 'react'
import UserInfo from './UserInfo'
export default class NabBar extends Component {
render() {
return (
<div style={{height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
NabBar的内容
<UserInfo user={this.props.user}/>
</div>
)
}
}
xxxxxxxxxx
//UserInfo.js
import React, { Component } from 'react'
export default class UserInfo extends Component {
render() {
return (
<div>你好,欢迎 {this.props.user.account}</div>
)
}
}
Context
提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
如果我们要在组件树中去共享某些数据,并且要避免通过中间元素传递 props,则可以使用Context来实现。