如何从React组件调用外部函数

Question

我正在用Pixi.js库开发游戏，并决定将React用于UI层。

我正在努力寻找使他们一起工作的好方法。例如：用户单击并撤消按钮（显示为react），撤消操作应在游戏内部进行。

我的第一个想法是使用状态管理库，但这没有任何意义，因为大多数动作根本没有任何状态，只是“新游戏”，“重启游戏”等。

我想出的是在全局范围内保存对我的主要react组件的引用，然后为其设置回调并将它们传递到react树下。像这样：

<UI ref={(component) => (window.UI = component)} />
window.UI.setUndoListener(() => game.undo())

还有我的UI组件：

export default class UI extends Component {
  constructor() {
    super()

    this.state = {
      onUndo: null,
      onNewGame: null,
      onRestartGame: null,
    }
  }

  setNewGameListener(fn) {
    this.setState({ onNewGame: fn })
  }

  setRestartGameListener(fn) {
    this.setState({ onRestartGame: fn })
  }

  render() {
    return (
      <div>
        <Menu
          onNewGame={this.state.onNewGame}
          onRestartGame={this.state.onRestartGame}
        />
      </div>
    )
  }
}

但这感觉很不正确，我觉得应该有更好的方法来做到这一点。有什么想法吗？

谢谢。