Javascript 在ReactJS中按下按钮时，如何使同级组件的子组件刷新？

所以我一直在寻找解决方案，但我似乎找不到一个适合我所做的。以下是我的网站结构：

正如你所看到的，我的“导航栏”组件在路由器之外，因为我总是希望它被渲染。但是我在导航栏上有一个暗模式切换，当我点击它时，我希望它更新刷新图表组件（它是一个react-chartjs-2图表）

---

我知道你可以使用

setState（）

以重新渲染，但是当我运行

onClick（）时，如何告诉图表组件从导航栏执行此操作我在其中包含的函数？
对于要触发同级组件或同级子组件重新呈现的组件，它们必须触发某个共享父组件的重新呈现。在这种情况下，所有组件都是单个根组件的子组件是有意义的，因为主题应该在整个项目中保持一致，除非您有特定的用例

可能最简单的方法是从最上面的组件传入回调
setTheme
以及
theme
属性。在
setTheme
回调中，您应该调用最顶层父组件的
setState
，这将触发使用新主题重新呈现每个子组件

查看有关如何更改react组件主题的更详细说明。
因此，您是否建议我将页面的其余部分作为导航栏的子项？这是好的做法吗？或者是否应该有另一种方式来组织我的项目，我没有意识到。如果这是一个愚蠢的问题，我道歉，因为这是我第一次尝试React。我不会把它放在导航栏下。通常，所有react组件都是某个根组件的子组件，该根组件只为每个页面提供一些公共状态和组件，如页眉和页脚，并可能决定从那里呈现和委托其他哪些组件。您可以将根组件视为空白画布，在其上绘制react组件。navbar可能是其中一个常用组件，根组件将保存
主题
状态。好的，我在父组件中有一个函数，导入navbar和Home，Home导入图表组件并显示它。我使用了
this.setState（this.state），但未重新加载图表对象。我通过在图表组件中尝试一个
console.log（）
来测试这一点，但它只从初始加载中获得输出。如果这是我犯的简单错误或误解，我深表歉意，谢谢您的帮助。这些组件中的每个组件都使用了
主题
属性？如果他们不这样做，那么就不会为他们更新任何状态，整个DOM分支将在重新加载程序中被忽略，并且将保持不变。如果我理解你的建议，我相信是这样的。我有View.jsx，它将主题元素从其状态传递到Home.jsx，然后再传递到Chart.jsx。更改主题的函数位于View.jsx中，单击导航栏中的按钮时会触发该函数。NavBar.jsx也是View.jsx的子级。调用函数时，它调用
this.setState（this.state）再次出现在Views.jsx中。