Reactjs 单击按钮后加载特定场景

下面是App.js的当前代码

//export default App;
export default class App extends Component {
  constructor(props) {
    super(props);

    this.unityContent = new UnityContent(
      "unity_project_build/Build.json",
      "unity_project_build/UnityLoader.js"
    );

    this.SceneChange = this.SceneChange.bind(this);
  }

  // change scene and orientatation buttons
  SceneChange() {
    this.unityContent.send("GameManageer", "ChangeScene");
  }

  render() {
    return (
      <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <ul className="navbar-nav mr-auto">
              <li>
                <Link to={"/"} className="nav-link">
                  {" "}
                  Home{" "}
                </Link>
              </li>
              <li>
                <Link to={"/Office"} className="nav-link">
                  Office
                </Link>
              </li>
              <li>
                <Link to={"/gym"} className="nav-link">
                  Gym
                </Link>
              </li>
            </ul>
          </nav>
          <hr />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/Office" component={Office} />
            <Route path="/gym" component={Gym} />
          </Switch>
        </div>
      </Router>
    );
  }
}

//导出默认应用程序；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.unityContent=新的unityContent(
“unity_project_build/build.json”，
“unity\u项目\u构建/UnityLoader.js”
);
this.SceneChange=this.SceneChange.bind（this）；
}
//更改场景和方向按钮
场景更改（）{
this.unityContent.send（“GameManager”、“ChangeScene”）；
}
render（）{
返回(
欢迎来到React路由器教程


{" "}
主页{“}


办公室


健身房



);
}
}

我想做的是，当我点击gym时，我想加载函数SceneChange

这就是我尝试过的，我在App.js中编写了函数Scenechange，并使用onClick函数绑定它。但一切都没有改变

 <li>
   <Link to={"/gym"} onClick={this.SceneChange} className="nav-link">
    Gym
   </Link>
 </li>

健身房

感谢您的帮助

最后解决它

render() {
    return (
      // Finally render the Unity component and pass
      // the Unity content
      // through the props. And create
      // a button to handle the click event

      <div>
        <button onClick={this.onClickStart}>Start</button>
        <button onClick={this.onClickStop}>Stop</button>
        <button onClick={this.decrease}>-</button>
        <input
          type="number"
          min="1"
          max="200"
          value={this.state.value}
          onChange={this.onNumberChange}
        />
        <button onClick={this.increase}>+</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.changeView}>2D/3D</button>
        {this.SceneChange()}
        {/* <button onClick={this.SceneChange}>Change</button> */}
        <Unity unityContent={this.unityContent} />
      </div>
    );
  }
}

export default Gym;

render（）{
返回(
//最后渲染Unity组件并传递
//统一内容
//通过道具。和创造
//处理单击事件的按钮
开始
停止
-
+
重置
二维/三维
{this.SceneChange（）}
{/*更改*/}
);
}
}
导出默认值；

---

在my Gym.js中，我直接调用函数。{this.SceneChange（）}它成功了。因此，我只是在这里发布解决方案，这样无论谁使用react unity webGL，都将拥有此解决方案，其中是

this.SceneChange（）

？如上所述，我已经编辑并添加了该函数。但基本上是在App.js中