一 一级一级props传递
/*
* @Description:
* @Version: 2.0
* @Autor: sun
* @Date: 2022-10-16 00:36:57
* @LastEditTime: 2022-10-16 00:48:59
*/
import React, { Component } from 'react';
function ProfileHeader(props) {
const { nickName, level } = props
return (
<div>
<h2>用户昵称: { nickName }</h2>
<h2>用户等级: { level }</h2>
</div>
)
}
function Profile(props) {
// const { nickName, level } = props
return (
<div>
{/* <ProfileHeader nickName={ nickName } level={ level }/> */}
<ProfileHeader { ...props }/>
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
nickName: "codeTest",
level: 110,
}
}
render() {
const { nickName, level } = this.state
return (
<div>
<Profile nickName={ nickName } level={level}/>
</div>
);
}
}
export default App;
二 context参数传递
/*
* @Description:
* @Version: 2.0
* @Autor: sun
* @Date: 2022-10-16 00:36:57
* @LastEditTime: 2022-10-16 01:03:49
*/
import React, { Component } from 'react';
//创建Context对象
const UserContext = React.createContext({
nickName: '张三',
level: -1
})
class ProfileHeader extends Component {
render() {
console.log(this.context)
return (
<div>
<h2>用户昵称: { this.context.nickName }</h2>
<h2>用户等级: { this.context.level }</h2>
</div>
)
}
}
ProfileHeader.contextType = UserContext
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
nickName: "codeTest",
level: 110,
}
}
render() {
return (
<div>
<UserContext.Provider value={ this.state }>
<Profile />
</UserContext.Provider>
</div>
);
}
}
export default App;
三 consumer传递
/*
* @Description:
* @Version: 2.0
* @Autor: sun
* @Date: 2022-10-16 00:36:57
* @LastEditTime: 2022-10-16 01:08:11
*/
import React, { Component } from 'react';
//创建Context对象
const UserContext = React.createContext({
nickName: '张三',
level: -1
})
function ProfileHeader() {
return (
<UserContext.Consumer>
{
value => {
return (
<div>
<h2>用户昵称: { value.nickName }</h2>
<h2>用户等级: { value.level }</h2>
</div>
)
}
}
</UserContext.Consumer>
)
}
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
nickName: "codeTest",
level: 110,
}
}
render() {
return (
<div>
<UserContext.Provider value={ this.state }>
<Profile />
</UserContext.Provider>
</div>
);
}
}
export default App;
四 多个Consumer传递
/*
* @Description:
* @Version: 2.0
* @Autor: sun
* @Date: 2022-10-16 00:36:57
* @LastEditTime: 2022-10-16 01:12:26
*/
import React, { Component } from 'react';
//创建Context对象
const UserContext = React.createContext({
nickName: '张三',
level: -1
})
const ThemeContext = React.createContext({
color: 'black'
})
function ProfileHeader() {
return (
<UserContext.Consumer>
{
value => {
return (
<ThemeContext.Consumer>
{
theme => {
return (
<div>
<h2>用户昵称: { value.nickName }</h2>
<h2>用户等级: { value.level }</h2>
<h2>颜色: { theme.color }</h2>
</div>
)
}
}
</ThemeContext.Consumer>
)
}
}
</UserContext.Consumer>
)
}
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
nickName: "codeTest",
level: 110,
}
}
render() {
return (
<div>
<UserContext.Provider value={ this.state }>
<ThemeContext.Provider value={{ color: 'red' }}>
<Profile />
</ThemeContext.Provider>
</UserContext.Provider>
</div>
);
}
}
export default App;