在demo中,我可以通过全局组件传递一个属性改变按钮的颜色,当父组件改变color颜色时,子组件也随之改变颜色
当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染 查看原文
- ThemeContext.tsx
import React from "react";
const ThemeContext = React.createContext('light');
export default ThemeContext
- index.tsx
import ThemedButton from './ThemedButton'
import React from "react";
import Context from './ThemeContext'
function Toolbar(props) {
// Toolbar 组件接受一个额外的“theme”属性,然后传递给 ThemedButton 组件。
// 如果应用中每一个单独的按钮都需要知道 theme 的值,这会是件很麻烦的事,
const obj = React.useContext(Context);
// 因为必须将这个值层层传递所有组件。
console.log(obj);
return (
<div>
<ThemedButton />
</div>
);
}
class App extends React.Component {
state = {
color:'red'
}
changeColor = ()=>{
this.setState({
color:'pink'
})
}
render() {
return <div>
<Context.Provider value={ this.state.color }>
<Toolbar />
</Context.Provider>
<Button onClick={this.changeColor}>改变颜色</Button>
</div>;
}
}
export default App
- 引用 ThemedButton.tsx
import React from "react";
// @ts-ignore
import context from './ThemeContext'
import { Button } from "antd";
function MyButton() {
const obj = React.useContext(context);
console.log(obj);
return <div>
<Button style={{color:obj}} >我是按钮</Button>
</div>;
}
export default MyButton