应用:无需为每层组件手动添加 props,能狗在组件树间进行数据传递的方法。
1、创建context
ContextProvider.tsx:
import React, {
useMemo, useState } from 'react';
export interface ContextState {
viewRef?: React.MutableRefObject<null>;
activeIndex: number;
setActiveIndex: (data: number) => void;
}
// 创建一个context
export const Context = React.createContext<ContextState>({
activeIndex: 0,
setActiveIndex: () => {
},
});
const ContextProvider: React.FC<
{
children: React.ReactNode } & {
viewRef: React.MutableRefObject<null>;
}
> = ({
children, viewRef }) => {
// 使用useState监听状态变更
const [activeIndex, setActiveIndex] = useState(0);
const value = useMemo(() => {
return {
viewRef,
activeIndex,
setActiveIndex, // 通过context来更新对象和数据,则可以使用state的方式将其传递下去
};
}, [showQuizsAnswer, shotViewRef, viewRef]);
// Context提供一个Provider组件,并将自组件包裹起来,这里的props名称必须是value
return <Context.Provider value={
value}>{
children}</Context.Provider>;
};
export default ContextProvider;
要更新 context,请将其与 state 结合。在父组件中声明一个状态变量,并将当前状态作为 context value 传递给 provider。
上述写法可以参考 useContext。
2、提供context
App.tsx:
import ContextProvider from './ContextProvider';
function App() {
// 下面这种写法是无效的,不能在父组件中使用
// const { setActiveIndex, activeIndex } = React.useContext(context);
return (
// 使用provider包裹,之后所有的子组件都可以获取得到距离他最近的provider的数据
<ContextProvider viewRef={
viewRef}>
<ChildComponent onChange={
handleChange} />
</ContextProvider>
);
}
注意:在这里App.tsx里面不能消费context,因为App.tsx属于父组件。
useContext()
总是在调用它的组件 上面 寻找最近的 provider。它向上搜索, 不考虑 调用 useContext() 的组件中的 provider。 所以上面注释掉的写法是错误的。
3、使用context
ChildComponent.txs:
function ChildComponent() {
// 使用useContext钩子访问Context的值
const {
setActiveIndex, activeIndex } = React.useContext(MyContext);
// 在子组件中调用setActiveIndex函数来更改value值
const handleInputChange = (newValue) => {
setActiveIndex(newValue);
};
return (
<TextInput value={
activeIndex} onChangeText={
handleInputChange} />
);
}