在 React 中的组件之间共享可变数据

Question

我在 React 和 Node.js 中制作了一个触摸打字游戏，我想让 TypeScript 页面中的函数组件更新一个全局共享的 EXP 变量，以便玩家可以在应用页面中导航并保留他们获得的 XP。一旦他们关闭应用程序，变量就可以重置，它只需要在每个会话中。这是type.tsx里面的XP代码，这是App.js的路由中调用的函数组件

Type.tsx

...

if (currIndex + 1 === length) {
      xpM = xpM + 1;
      bonusCounter = bonusCounter + 1;
      err = err + errorChar;
      currXP = xp * correctChar;
      addXP = (currXP - (err * 2)) * xpM;
      xpPercent = Math.round((uXP/xpNeed) * 100);
      (gain as HTMLAudioElement).play();
      console.log(xpPercent);
      if (err > correctChar) {
        addXP = correctChar * 3;
      }
      tXP = tXP + addXP;
      uXP = tXP;
...

我希望 tXP、xpNeed 和 level 变量可以从 Select Test 组件以及其他打字页面访问（有 6 种不同的测试使用不同的文本数组来填充打字文本。）我已经阅读了 Redux可以做到这一点，但在调查之后似乎我需要重新构建整个应用程序才能使用 Redux 工具。有没有一种快速而肮脏的方法来实现这一目标？该应用程序仅用作正在开发的大型 Unity 游戏的演示，因此它不必是一个超级优雅或复杂的解决方案。谢谢！

Answer 1

为全局变量及其方法创建一个类：

export default class GlobalVariables {
static createVariables() {
    //set here variables you want to be global
    this.tXP = 0;
}

static getXP() {//method to get XP
    return this.tXP;
}

static addXP(value) {//method to add XP
    this.tXP += value;
}

//create others methods you want for your variables
}

在您的启动组件中导入类并调用 createVariables（在应用启动时调用它）：

import GlobalVariables from './Global'
...
GlobalVariables.createVariables()
...

在您的其他组件中导入该类并使用其他方法：

import GlobalVariables from './Global'
...
GlobalVariables.addXP(5);
console.log(GlobalVariables.getXP())
...

Answer 2

我建议您使用React Context 在组件之间共享状态。您可以创建一个可以从相关组件访问的 EXP 变量并共享更新。

如果您需要保持服务器同步，您可以在上面的 Context Provider 中更新本地状态时发布 EXP 增量，或者如果您需要实时通信并且游戏非常健谈，则使用 socket.io。