Question

我有一个看起来像这样的应用程序结构...

<div class="col-md-6">
  {!! Form::text(field1, "", ['id'=> 'idField', 'class' => 'form-control', 'placeholder' => 'Modify field']) !!}
</div>
<div class="col-md-2">
  {!! Form::date(field2, "", ['id'=> 'datetimepicker', 'class' => 'form-control']) !!}
</div>

当<BrowserRouter> <Header /> <Switch> <Route path='/' component={Home} /> <Route path='/introduction' component={Introduction} /> <Route path='/guide/:slug([a-z0-9-]+)' component={Guide} /> </Switch> </BrowserRouter>路线匹配时，/guide/...组件需要加载指南，然后以某种方式填充Guide的{{1}}道具，以便添加指南的标题和目录到全局应用程序标题。

我知道我可以在我的根children组件中使用React的上下文API或状态对象来实现这一目标。但是，这将要求所有其他组件在加载另一条路线时撤消这些更改。

或者，我可以在Header内添加另一个App块，并拥有一个<Switch>组件，该组件独立于Header组件运行，但这需要两次加载指南的内容。（如果已缓存，则不是世界末日，但仍然是。）

在这种情况下，GuideHeader更新Guide的最佳方法是什么？

Answer 1

基本上，您正在寻找一个中央存储，数据更新应映射到这些组件。您可以为这种情况集成redux状态管理。

只要中央存储中的密钥有更新，Redux就会将数据提供给标头。您将必须从标头组件订阅密钥以了解更新。

更新非子组件的子组件

1 个答案: