reactjs - 反应多个上下文
问题描述
我正在使用通过上下文传递的函数。
ChildComponent.contextType = SomeContext;
现在我用this.context.someFunction();
. 这行得通。
如果我需要来自两个不同父组件的函数,我该怎么做?
解决方案
您仍然可以将函数作为子消费者节点与 16.3 上下文 API 一起使用,这是React 文档建议做的:
// Theme context, default to light theme
const ThemeContext = React.createContext('light');
// Signed-in user context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;
// App component that provides initial context values
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
// A component may consume multiple contexts
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}
要在组件的上下文中使用函数,您通常会将组件包装在 HOC 中,以便将上下文作为 props 传入:
export const withThemeContext = Component => (
props => (
<ThemeContext.Consumer>
{context => <Component themeContext={context} {...props} />}
</ThemeContext.Consumer>
)
)
const YourComponent = ({ themeContext, ...props }) => {
themeContext.someFunction()
return (<div>Hi Mom!</div>)
}
export default withThemeContext(YourComponent)
如果您正在运行 React 16.8+,您还可以使用钩子更干净地执行此操作,而无需使用 HOC:
import React, { useContext } from "react"
const YourComponent = props => {
const theme = useContext(ThemeContext)
const user = useContext(UserContext)
}
或者,如果您大量使用这些上下文,您甚至可以制作自定义挂钩以进一步简化:
const useTheme = () => useContext(ThemeContext)
const useUser = () => useContext(UserContext)
const YourComponent = props => {
const theme = useTheme()
const user = useUser()
}
推荐阅读
- xcode - 如何在 Xcode 9.2 和 iPhone XS max 中添加模拟器 iPhone XS
- javascript - Fullcalendar updateEvent 不会重新渲染
- angular - entryComponents之间的区别
- swift - 从 iOS 版本 12 崩溃的核心数据中获取数据
- reactjs - ReactJS - 从子组件中检索状态
- r - 两个零之间的最大值
- javascript - 如何在 ReactJS 中预览视频
- maps - 周围有图像的谷歌地图集群
- php - 与 Group 相关的选项中的 Foreach 循环
- database - 如何在laravel中使用一个查询将大量数据插入通知表