时间戳

首页 > 解决方案 > 为新游戏再次挂载子组件

reactjs - 为新游戏再次挂载子组件

问题描述

我正在创建一个游戏来猜测指板上的吉他音符。

我在子组件（GameAreaClass）上有游戏，我使用回调将游戏数据传回给父组件。在父（应用程序）中，我将计算分数并将其加载到应用程序状态并将分数加载到新 div。这是有效的。虽然我需要正确建立分数规则。

我需要的是一种重新挂载子 GameAreaClass 的方法，以便在处理完回调后立即开始新游戏。

我需要通过 NPM 库加载指板，因此 DOM 添加在 ComponentDidMount 中处理。这是GenerateFret我实际上需要重新运行的方法。最好的方法是什么？

Index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import "bootstrap/dist/css/bootstrap.css";
    import NavBar from "./components/NavBar";
    import SideBar from "./components/SideBar";
    import GameAreaClass from "./components/GameAreaClass";

    class App extends React.Component {
      state = { currentScore: 0 };

      onNoteSubmit = (note, rNote, score) => {
        // check note and rNote match, if true increment score
        this.incrementScore();
        // re-render/mount GameAreaClass
      };

      incrementScore() {
        this.setState((state) => {
          return { currentScore: state.currentScore + 1 };
        });
      }

      render() {
        return (
          <div className="container">
            <h2>Fretty - the guitar game</h2>
            <NavBar />

            <div className="row mt-4">
              <SideBar gamename="Guess the note" />

              <GameAreaClass onSubmit={this.onNoteSubmit} />
              <div>Score : {this.state.currentScore}</div>
            </div>
          </div>
        );
      }
    }
    ReactDOM.render(<App />, document.querySelector("#root"));

GameAreaClass

import React, { state } from "react";
import { Fretboard, Tunings } from "fretboards";

const GenerateFret = () => {
  const config = {
    frets: 12, // Number of frets to display
    startFret: 0, // Initial fret
    strings: 6, // Strings
    tuning: Tunings.guitar6.standard, // Tuning: default = Standard Guitar
    fretWidth: 50, // Display width of frets in pixels
    fretHeight: 20, // Display heigh of frets in pixels
    leftHanded: false, // Show mirror image for left handed players
    showTitle: true, // Set the note name as the title, so it will display on hover
    where: "#fret",
  };

  const notes =
    "6:e2 6:f2 6:f#2 6:g2 6:g#2 6:a2 6:a#2 6:b2 6:c3 6:c#3 6:d3 6:d#3 6:e3 " +
    "5:a2 5:a#2 5:b2 5:c3 5:c#3 5:d3 5:d#3 5:e3 5:f3 5:f#3 5:g3 5:g#3 5:a3 " +
    "4:d3 4:d#3 4:e3 4:f3 4:f#3 4:g3 4:g#3 4:a3 4:a#3 4:b3 4:c4 4:c#4 4:d4 " +
    "3:g3 3:g#3 3:a3 3:a#3 3:b3 3:c4 3:c#4 3:d4 3:d#4 3:e4 3:f4 3:f#4 3:g4 " +
    "2:b3 2:c4 2:c#4 2:d4 2:d#4 2:e4 2:f4 2:f#4 2:g4 2:g#4 2:a4 2:a#4 2:b4 " +
    "1:e4 1:f4 1:f#4 1:g4 1:g#4 1:a4 1:a#4 1:b4 1:c5 1:c#5 1:d5 1:d#5 1:e5";

  let noteList = notes.split(" ");

  let randomNote = noteList[Math.floor(Math.random() * noteList.length)];

  let board = Fretboard(config);
  board.draw(randomNote);
  return randomNote;
};

class GameAreaClass extends React.Component {
  state = { note: "", rNote: "", score: 0 };
  componentDidMount() {
    const ranNote = GenerateFret();
    this.setState({ rNote: ranNote });
  }

  onFormSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.note, this.state.rNote, this.state.score);

  };

  render() {
    return (
      <div id="fret" className="col- border border-primary pt-3">
        <div>
          <form onSubmit={this.onFormSubmit} className="form-inline">
            <label htmlFor="guessednote">Guess the note?</label>
            <div className="col-6">
              <input
                type="text"
                value={this.state.note}
                onChange={(e) => this.setState({ note: e.target.value })}
                className="form-control"
                id="guessednote"
              />
              <button type="submit" className="btn btn-primary ml-2">
                Submit
              </button>
              <span className="ml-3">H</span>
            </div>
          </form>
        </div>
      </div>
    );
  }
}
export default GameAreaClass;

标签： reactjs

解决方案

您可以score作为道具传递给您的GameAreaClass组件

<GameAreaClass score={this.state.currentScore} onSubmit={this.onNoteSubmit} />

并检查之前的分数是否与当前的分数不同，然后调用GenerateFret()函数

 ComponentDidUpdate(prevProps) {
    if (this.props.score !== prevProps.score) {
      const ranNote = GenerateFret();
      this.setState({ rNote: ranNote });
    }
  }

推荐阅读