从孩子更新反应上下文或改变组件结构？答案

【问题标题】：Update react Context from children or alter component structure?从孩子更新反应上下文或改变组件结构？
【发布时间】：2019-10-27 18:33:22
【问题描述】：

这个问题集中在 Header 组件上：
所以在我的应用中。我有一个看起来有点像这样的东西，有更多的组件和更多的路线：

return (
        <SiteLayoutContext.Provider value={siteConfiguration} >
            <div className="topContainer">

                <BrowserRouter>
                    <div className="header">
                        <Header/>
                    </div>

                    <div className="mainWrapperContainer">
                        <div className="contentWrapper">

                            <Route exact path='/login' component={Login}/>
                            <Route exact path='/home' component={Home}/>
                            <Route exact path='/about' component={About}/>
                            <Route exact path='/collection/:collectionName' component={CollectionLandingPage}/>
                            <Route exact path='collection/:collectionAlias/id/:itemId' component={ItemView}/>
                        </div>
                        <Footer/>
                    </div>
                </BrowserRouter>
            </div>

        </SiteLayoutContext.Provider>
    )

我想要完成的事情：
我目前可以为标题设置徽标。
这很好，但我希望用户能够选择一个自定义徽标，如果它们在一个集合中，它将替换全局默认值。
要在集合内定义，路由将以 /collection/ 开头，因此在下面的示例中，ItemView 和 CollectionLandingPage 都应该有这个自定义徽标。

我需要能够告诉我的标题它当前在一个集合中，并且我想限制渲染和重绘以提高性能。我有一个获取集合信息的 api 端点，它会告诉我是否设置了自定义徽标，以及 href 应该是什么。

我尝试过的：
我最初的想法是将标题从上面显示的主要return() 中撕下来，而是将它放在每个组件中，这样我就可以使用React 的 useLocation() 钩子用于检查 url，并且仅在以下情况下获取集合的徽标：
1) 我们在集合中并且
2) 已设置自定义徽标。

我对这种方法的问题是我现在必须在每个组件中输入 Header，而不是当前的实现方式。

我的第二个想法是将它全部包装在某种上下文中，在每个组件中使用它，并根据 url 更新它，然后它会获取相关信息，但这只是感觉关闭。我想我每次点击/collection/:collectionName 时都可以获取集合的信息并更新一个新的CollectionInfoContext，这只会在collectionName 更改时更新？

我只是在寻找有关如何实现此功能的建议，因为嗯...我觉得有一个我没有列出的选项可能更容易和更合理...和stackoverflow标准一样。

免责声明：我是 react 上下文 api 新手

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

如果您不使用 Redux 或其他状态管理解决方案，上下文绝对是跨应用程序共享数据的合理方式，UI 主题实际上是 React 文档中的 recommended use cases 之一。

我能看到的唯一问题是，仅更改某些组件的状态需要一种方法来重置您只需要标准徽标的其他地方的上下文。但是读取 URL 名称可以通过简单地存储路径名称并在 Header 内部使用它来呈现自定义徽标（如果路径包含 collections）来解决这个问题。如果Header 可以自行读取路径名，那么如果这是唯一在任何地方都是动态的条件，您甚至可能不需要上下文。

【讨论】：