如何在根/父条目中使用 useContext 访问上下文数据?

Question

这是代码沙箱。

我可以通过子组件成功获取和设置上下文数据。 但是为什么我不能在父级中访问它们？

const App: React.FC = () => {
const context = useContext(MyContext)
return (
<div className="App">
<MyContextProvider>
<Comp1 />
<Comp2 />
<p>
Result inside: {context.selection}
</p>
</MyContextProvider>
<p>
Result outside: {context.selection}
</p>
</div>
);
}

这是子组件。

const Comp1 = () => {
const context = useContext(MyContext)
return (
<div>
<p>current: {context.selection}</p>
<button onClick={() => context.setSelection && context.setSelection(123)}>Set to '123'</button>
</div>
)
}

这是上下文文件。

interface MyContextProviderType {
children: JSX.Element | JSX.Element[]
}
interface ContextProps {
selection: string
setSelection: Function
}
export const MyContext = createContext<Partial<ContextProps>>({})
export const MyContextProvider = ({children}: MyContextProviderType) => {
const [selection, setSelection] = useState('')
return (
<MyContext.Provider value={{selection, setSelection}}>
{children}
</MyContext.Provider>
)
}

感谢您的帮助！

Answer 1

调用的组件

useContext(MyContext)

必须在树的更高位置具有匹配的提供程序。 否则，该值将是初始化上下文时使用的任何值。 在本例中，此空对象：

createContext<Partial<ContextProps>>({})

您可以在提供程序中呈现应用程序组件以使沙盒正常工作

<MyContextProvider><App /></MyContextProvider>