javascript - 如何从其他类(即 NavBar 组件)操作 index.tsx(最父级)中的变量?
问题描述
我目前有我的 index.tsx 如下
const dark = createMuiTheme({
palette: {
type: 'dark',
}
})
const light = createMuiTheme({
palette: {
type: 'light',
}
})
const toggle:boolean = false;
ReactDOM.render(
<MuiThemeProvider theme={toggle?dark:light}>
<CssBaseline />
<App />
</MuiThemeProvider>,
document.getElementById('root') as HTMLElement
);
我最近对其进行了更改,因此我可以实现暗模式切换,这发生在 MuiThemeProvider。
问题是我不确定如何在 index.tsx (大多数父文件)中操作布尔(切换)变量,其中我的所有逻辑/代码都在 App.tsx 中,尤其是在 NavBar.tsx 上,它是 App 内部的一个组件.tsx 有一个按钮来触发夜间模式。
我最近才使用 React,所以我知道我将不得不使用道具以某种方式将价值提升到父级......但这实际上是如何发生的,这是唯一正确的方法吗?
TLDR;鉴于以下架构,我将如何从 NavBar 操作索引处的变量?此外,似乎 index.tsx 与其他的有点不同,因为其中没有类。如果是这样,跟踪变量的最佳方法是什么?我可以像其他所有组件一样添加状态吗?首页 > 应用 > 导航栏
解决方案
推荐阅读
- floating-point - vulkan浮点行为的问题
- python - Python 错误,“NumPy 布尔数组索引分配需要 0 或 1 维输入,输入有 2 维”
- database-design - WarGames 的数据库结构 - 玩家 - 奖励
- c# - 如何为测验应用程序创建控制台计时器
- c++ - 犰狳的 print() 方法和 cout 从 Rcpp 调用时的顺序不一致
- python - Eratosthenes 实施的慢筛。为什么?
- mysql - docker-compose:依赖容器在依赖的 MySQL 容器完全初始化之前运行
- python - 从 Python 中的数据框创建起点-终点矩阵
- javascript - 在会话结束前提示用户
- kotlin - Kotlin:在多平台项目中打印类名而不进行反射