我有一个名为 SortContext 的上下文。我想做的是初始化这个上下文（创建它的提供者），然后在同一个组件中使用该上下文。这可能吗？
例如：
export default function MyComponent ({children}) {
const mySortValue = useContext(SortContext)
return (
<SortContext.Provider value={'exampleValue'}>
{children}
</SortContext.Provider>
)
}
在此组件中，变量 mySortContext 将无法访问值“exampleValue”，因为直到 useContext 挂钩之后才创建此上下文。
或者：
export default function MyComponent ({children}) {
return (
<SortContext.Provider value={'exampleValue'}>
<SortContext.Consumer>
{context => {
const mySortValue = useContext(SortContext)
return children
}}
</SortContext.Consumer>
</SortContext.Provider>
)
}
这样的东西不起作用，因为该函数不能使用反应钩子。
显然，我可以创建一个新组件，将其放在 标记中，然后访问那里的上下文，但是有什么方法可以在一个组件中完成这一切吗？
//边注
为了提供一些关于为什么我想要这个的背景信息，我使用上下文来建立一些有关如何对数据进行排序的信息。我希望上下文中的任何组件都可以访问这些数据。如果我想在单个组件中包含一个简单的按钮、数据列表和排序功能，那么创建两个组件似乎有点过分了；一个用于为其提供排序上下文，另一个用于托管排序按钮和数据。
如果不创建另一个组件，这是不可能的。
这里的 React js beta 文档的“陷阱”框中提到了这一点（向下滚动一点）：https://beta.reactjs.org/apis/usecontext#passing-data-deeply-into-the-tree https://beta.reactjs.org/apis/usecontext#passing-data-deeply-into-the-tree
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
