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>>({})

您可以在提供程序中呈现您的App组件，以使沙箱正常工作

<MyContextProvider><App /></MyContextProvider>

如何在root / Parent条目中使用useContext访问上下文数据？

1 个答案: