Reactjs 如何在NextJs中重新加载函数组件

嘿，我正在使用nextjs，我想在我的索引页面中有条件地呈现一个组件。 这样

{GlobalVars.test === "show" ? (
                <GlobalSettings
                  activeTab={active}
                  data={globalSettings.data}
                  loading={globalSettings.loading}
                ></GlobalSettings>
              ) : null}

{GlobalVars.test==“show”(
)：null}

GlobalVars是我的函数组件索引上方同一文件中的一个类

export class GlobalVars {
  public static test: string = "show";
}

const Index: React.FC<{}> = () => {
here is my fucntion component with html and so on...

导出类GlobalVars{
公共静态测试：string=“show”；
}
常量索引：React.FC=（）=>{
这里是我的功能组件与html等。。。

现在我正在另一个函数组件中更改此全局变量，但页面不会重新加载

---

我非常乐意提供任何提示：）

您可以在组件中将变量置于状态。我建议您通读一下。