单击按钮后加载特定场景

Question

下面是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>
    );
  }
}

我想做的是，当我单击健身房时，我想加载功能SceneChange。

这是我尝试过的，我在App.js中编写了SceneChange函数，并使用onClick函数将其绑定。但没有任何变化

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

感谢您的帮助。

Answer 1

最后解决。

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;

在我的Gym.js中，我直接调用该函数。 {this.SceneChange（）}并且有效。因此，我只是在此处发布解决方案，以便使用react unity webGL的人都可以使用此解决方案]