小编Gar*_*oss的帖子

我有一个简单的导航结构，设置了 4 个主屏幕，用户可以使用 React-navigation/TabNavigator 在这些屏幕之间进行导航。在每个主屏幕中，用户可以使用react-navigation/StackNavigator 导航到辅助屏幕。辅助屏幕是所有 4 个主屏幕的相同组件，因为内容是动态加载的，具体取决于使用 redux 选择的内容来更改内容的状态。

您可以在下图中看到结构。

我遇到的问题是，一旦从 tab1 调用辅助屏幕（例如），辅助屏幕就会滚动到位，其中包含与 tab1 相关的内容。如果用户随后导航到 tab2 并调用辅助屏幕，它会再次滚动到位，其中包含与 tab2 相关的内容。这一切都很好，但是如果用户随后导航回 tab1，辅助屏幕仍然存在，这次是与 tab2 相关的内容，因为它们已经更改了前一个选项卡中的状态。

长话短说，如果用户随时与 TabNavigator 交互，我会尝试重置每个主屏幕的各个堆栈。我正在努力了解如何通过触发父选项卡组件中的事件来从子堆栈组件启动函数。

希望这对人们有意义。

我正在尝试向具有同一类的所有 div 添加子范围。

我可以通过定位单个元素的 Id 来实现此目的

超文本标记语言

<div id="h1" class="header">Hello </div>
<hr>
<div id="h2" class="header">what about this one </div>

JavaScript

var header = document.getElementById('h1');

var newSpan = document.createElement("span");
header.appendChild(newSpan);
newSpan.innerHTML = "i'm here";

但是当我将其更改为

var header = document.getElementsByClassName('header');

它无法工作。

谁能看到我哪里出错了？

JSFiddle