目录一、概述二、apiReact.createContextContext.ProviderClass.contextTypeContext.ConsumerContext.disp
const MyContext = React.createContext(defaultValue)
const MyContext = React.createContext(defaultValue)
<MyContext.Provider value={xxx}> ... </MyContext.Provider>
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
}
componentDidUpdate() {
let value = this.context;
}
componentWillUnmount() {
let value = this.context;
}
render() {
let value = this.context;
}
}
MyClass.contextType = MyContext;
<MyContext.Consumer>
{value => }
</MyContext.Consumer>
const MyContext = React.createContext()
MyContext.displayName = 'MyDisplayName'
<MyContext.Provider> //在 DevTools 中显示的标签:MyDisplayName.Provider
<MyContext.Consumer>//在 DevTools 中显示的标签:MyDisplayName.Consumer
//如果没有 MyContext.displayName = 'MyDisplayName' ,则显示Context.Provider、Context.Consumer
在 DevTools 中需要显示的内容
//ThemeContext.js
import React from 'react'
export const ThemeContext = React.createContext('light')
//themed-button.js
//在需要的位置使用 Class.contextType
import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
export default ThemedButton
//app.js
//上下文包裹组件 Context.Provider
import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.CSS';
function App() {
return (
<ThemeContext.Provider value='dark'> //dark将默认值light覆盖
<div className="App">
<header className="App-header">
<ThemedButton />
</header>
</div>
</ThemeContext.Provider>
);
}
export default App;
需要多个上下文的值时可以使用Consumer
//ThemeContext.js
import React from 'react'
const ThemeContext = React.createContext('light')
ThemeContext.displayName = 'ThemeContext'
export default ThemeContext
//UserContext.js
import React from 'react'
const UserContext = React.createContext('guest')
UserContext.displayName = 'UserContext'
export default UserContext
//app.js
//使用Provider赋值:
import React, { Component } from 'react';
import ThemeContext from './context/ThemeContext.js';
import UserContext from './context/UserContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ThemeContext.Provider value={'dark'}>
<div className="App">
<UserContext.Provider value={'user'}>
<header className="App-header">
<ThemedButton />
</header>
</UserContext.Provider>
</div>
</ThemeContext.Provider>
);
}
}
export default App
//themed-button.js
import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
import UserContext from "./context/UserContext.js";
class ThemedButton extends Component {
render() {
return (
<>
<ThemeContext.Consumer>
{theme => <div>{theme}</div>}
</ThemeContext.Consumer>
<UserContext.Consumer>
{user => <div>{user}</div>}
</UserContext.Consumer>
</>
);
}
}
export default ThemedButton
react原生Hook ,让函数式组件也可以使用Context,而且支持多个不同类型的context
//ThemeContext.js
import React from 'react'
const ThemeContext = React.createContext('light')
ThemeContext.displayName = 'ThemeContext'
export default ThemeContext
//UserContext.js
import React from 'react'
const UserContext = React.createContext('guest')
UserContext.displayName = 'UserContext'
export default UserContext
//app.js
//使用Provider赋值:
import React, { Component } from 'react';
import ThemeContext from './context/ThemeContext.js';
import UserContext from './context/UserContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
const App = () => {
render() {
return (
<ThemeContext.Provider value={'dark'}>
<div className="App">
<UserContext.Provider value={'user'}>
<header className="App-header">
<ThemedButton />
</header>
</UserContext.Provider>
</div>
</ThemeContext.Provider>
);
}
}
export default App
//themed-button.js
import { useContext } from 'react'
import ThemeContext from './context/ThemeContext'
import UserContext from './context/UserContext'
const ThemedButton = () => {
const theme = useContext(ThemeContext)
const user = useContext(UserContext)
return (
<>
<div>{theme}</div>
<div>{user}</div>
</>
)
}
export default ThemedButton
到此这篇关于React Context详解使用方法的文章就介绍到这了,更多相关React Context内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React Context详解使用方法
本文链接: https://www.lsjlt.com/news/174005.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0