React使用context进行跨级组件数据传递
作者：a堅強的泡沫
这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧
应用：无需为每层组件手动添加 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} />
);
}
到此这篇关于React使用context进行跨级组件数据传递的文章就介绍到这了,更多相关React context组件数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！