我在上下文中有如下语言设置
class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider;
我的应用程序代码如下所示
<LanguageProvider> <App> <MyPage /> </App> </LanguageProvider>
我的页面具有切换语言的组件
<MyPage> <LanguageSwitcher/> </MyPage>
LanguageSwitcher 在这种MyPage情况下,需要更新上下文以将语言更改为“ jp”,如下所示
LanguageSwitcher
MyPage
class LanguageSwitcher extends Component { static contextTypes = { langConfig: PropTypes.object, }; updateLanguage() { //Here I need to update the langConfig to 'jp' } render() { return <button onClick={this.updateLanguage}>Change Language</button>; } } export default LanguageSwitcher;
如何从LanguageSwitcher组件内部更新上下文?
挂钩是在16.8.0中引入的,因此以下代码要求最低版本为16.8.0(向下滚动以获得类组件示例)。CodeSandbox演示
首先,为了拥有可以传递给消费者的动态上下文,我将使用父级的状态。这样可以确保我拥有单一的真理来源。例如,我的父应用程序将如下所示:
const App = () => { const [language, setLanguage] = useState("en"); const value = { language, setLanguage }; return ( ... ); };
将language被存储在状态。稍后,我们将通过上下文同时传递language和setter函数setLanguage。
language
setLanguage
接下来,我创建了这样的语言上下文:
// set the defaults const LanguageContext = React.createContext({ language: "en", setLanguage: () => {} });
在这里,我为language(’en’)设置了默认值,并设置了一个setLanguage将由上下文提供程序发送给使用者的函数。这些只是默认值,在父级中使用提供程序组件时,我将提供其值App。
App
注意:LanguageContext无论您是否保持相同
LanguageContext
为了让语言切换器设置语言,它应该可以通过上下文访问语言设置器功能。它可能看起来像这样:
const LanguageSwitcher = () => { const { language, setLanguage } = useContext(LanguageContext); return ( <button onClick={() => setLanguage("jp")}> Switch Language (Current: {language}) </button> ); };
在这里,我只是将语言设置为“ jp”,但是您可能有自己的逻辑来设置语言。
现在,我将在a中呈现语言切换器组件,LanguageContext.Provider并将必须通过上下文发送的值传递到更深的任何级别。这是我父母的App样子:
LanguageContext.Provider
const App = () => { const [language, setLanguage] = useState("en"); const value = { language, setLanguage }; return ( <LanguageContext.Provider value={value}> <h2>Current Language: {language}</h2> <p>Click button to change to jp</p> <div> {/* Can be nested */} <LanguageSwitcher /> </div> </LanguageContext.Provider> ); };
现在,只要单击语言切换器,它就会动态更新上下文。
CodeSandbox演示
在React 16.3中引入了最新的上下文API,它提供了一种具有动态上下文的好方法。以下代码要求最低版本为16.3.0。CodeSandbox演示
class App extends Component { setLanguage = language => { this.setState({ language }); }; state = { language: "en", setLanguage: this.setLanguage }; ... }
将language其与语言设置器方法一起存储在状态中,您可以将其保留在状态树之外。
class LanguageSwitcher extends Component { render() { return ( <LanguageContext.Consumer> {({ language, setLanguage }) => ( <button onClick={() => setLanguage("jp")}> Switch Language (Current: {language}) </button> )} </LanguageContext.Consumer> ); } }
class App extends Component { setLanguage = language => { this.setState({ language }); }; state = { language: "en", setLanguage: this.setLanguage }; render() { return ( <LanguageContext.Provider value={this.state}> <h2>Current Language: {this.state.language}</h2> <p>Click button to change to jp</p> <div> {/* Can be nested */} <LanguageSwitcher /> </div> </LanguageContext.Provider> ); } }