Question

我正在使用Typescript，React和Material-UI。 Plain React，没有Redux，Flux等

当我单击 ButtonComponent 中的按钮时，需要滚动到 TabsComponent 并选择一个特定的标签。这些组件没有父子关系。

<ResultsComponent>
  ...
  <ButtonComponent/>
  ...
</ResultsComponent>
<ReportComponent>
  <TabsComponent/>
  ...
<ReportComponent>

在 TabsComponent 中，我有一个viewModel来管理一些逻辑并存储 selectedTabId

在 ButtonComponent 中，我有一个 onClick 事件，该事件获取 TabsComponent 的位置并使用 window.scrollTo（...） 进行滚动。它还获取需要切换到的 tabId ，但是我不确定是否可以通过 TabsComponent 访问viewModel并设置属性 selectedTabId 。

有没有办法做到这一点？

Answer 1

反应全部与组件树中向下流动的数据有关，水平数据流被视为反模式，应避免使用。如果您需要在不相关的组件之间传递数据，则有两种解决方案：

如果您只需要访问一小部分信息，Reference API将为您解决问题
这是范围内始终必须获取的一条信息？ Context获胜
您需要一直访问其他组件状态吗？使用Flux或Redux

Answer 2

我最终使用了Mobx可观察对象。

我有一个父级组件，其子级为 ResultsComponent 和 ReportComponent 。在此父级中，我创建了一个@observable变量 selectedTabId 来保存要显示为选中状态的选项卡的TabId，并创建一个@observable函数来更改该 selectedTabId 。

因此，我将函数（或回调）传递给 ResultsComponent ，并在onClick事件期间执行它。这将设置 selectedTabId 的值。我还将变量 selectedTabId 传递给 ReportComponent ，然后传递给 TabsComponent ，并使用它来设置选定的标签。由于它是@observable，因此每次在 ButtonComponent 中执行回调时， TabsComponent

中的选项卡都会更改

一个组件可以访问另一个不相关的组件的视图模型吗？

2 个答案: