/*
useContext
info: 解决子孙后代组件数据传递
01: 结合createContext一起使用
const testContent = React.createContext(themes.light);
02: 结合Provider,为后代组件使用
const val = useContext(testContent);
*/
export const ThemeContext = React.createContext();
const UseContentDOM = () => {
const obj = {
foreground: "#ffffff",
background: 'red'
};
return (
<ThemeContext.Provider value={obj}>
<UseContextSon></UseContextSon>
</ThemeContext.Provider>
);
};
function UseContextSon() {
const theme = useContext(ThemeContext);
return (
<button style={{background:theme.background,color:theme.foreground}}>
I am styled by theme context!
</button>
);
}