1 回答

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊
這將是一個(gè)將上下文與類組件一起使用的工作示例。請(qǐng)記住,當(dāng)您從一個(gè)類訪問它時(shí),您只能使用一個(gè)上下文。
在這里我創(chuàng)建了一個(gè)按鈕組件來更新上下文。如您所見,我在上下文中有一個(gè)函數(shù),它會(huì)更新我們從 useState 傳遞 setAppState 函數(shù)的上下文。
const AppContext = React.createContext({
appState: { IsLoading: true, IsLoggedIn: false },
setAppState: () => {},
});
export default function App() {
const [appState, setAppState] = React.useState({
IsLoading: false,
IsLoggedIn: false,
});
return (
<AppContext.Provider value={{ appState, setAppState }}>
<View style={styles.container}>
<Text style={styles.paragraph}>{JSON.stringify(appState)}</Text>
<Button />
</View>
</AppContext.Provider>
);
}
class Button extends React.PureComponent {
render() {
return (
<TouchableOpacity
onPress={() =>
this.context.setAppState({
IsLoading: !this.context.appState.IsLoading,
IsLoggedIn: true,
})
}>
<Text>Update</Text>
</TouchableOpacity>
);
}
}
Button.contextType = AppContext;
零食網(wǎng)址 https://snack.expo.io/@guruparan/contextwithclass
添加回答
舉報(bào)