0

我试图了解我们如何将一个非常简单的 javascript 程序翻译成 ReactJS。我有限的前端经验是使用 React，其中事物被包装在组件或函数中以呈现输出。

这个简单的程序有 3 个组件，我想将它们放入 React 类或函数中：

1，一个用于音符音高的 JavaScript 对象。

TWINKLE_TWINKLE = {
  notes: [
    {pitch: 60, startTime: 0.0, endTime: 0.5},
    {pitch: 60, startTime: 0.5, endTime: 1.0},
    ... 
  ],
  totalTime: 5
};

2、导入，可以输出注释：

player = new mm.Player();

3，跑步者，应该输出它们。

player.start(TWINKLE_TWINKLE);
player.stop();

我想把它包装在一个反应​​类中，然后我可以导出。我知道这可能是一个非常简单的问题，但理解起来会很有帮助。

4

1 回答 1

1

首先，安装正确的依赖：

npm install @magenta/music

然后，在您的React代码中，执行以下操作：

import React from "react";
import * as mm from "@magenta/music/es6";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.TWINKLE_TWINKLE = {
      notes: [
        { pitch: 60, startTime: 0.0, endTime: 0.5 },
        { pitch: 60, startTime: 0.5, endTime: 1.0 },
        { pitch: 67, startTime: 1.0, endTime: 1.5 },
        { pitch: 67, startTime: 1.5, endTime: 2.0 },
        { pitch: 69, startTime: 2.0, endTime: 2.5 },
        { pitch: 69, startTime: 2.5, endTime: 3.0 },
        { pitch: 67, startTime: 3.0, endTime: 4.0 },
        { pitch: 65, startTime: 4.0, endTime: 4.5 },
        { pitch: 65, startTime: 4.5, endTime: 5.0 },
        { pitch: 64, startTime: 5.0, endTime: 5.5 },
        { pitch: 64, startTime: 5.5, endTime: 6.0 },
        { pitch: 62, startTime: 6.0, endTime: 6.5 },
        { pitch: 62, startTime: 6.5, endTime: 7.0 },
        { pitch: 60, startTime: 7.0, endTime: 8.0 },
      ],
      totalTime: 8,
    };
    this.player = new mm.Player();
  }

  play = () => {
    if (this.player.isPlaying()) {
      return;
    }
    this.player.start(this.TWINKLE_TWINKLE);
  };

  render() {
    return (
      <div>
        <button type="button" onClick={this.play}>
          Play!
        </button>
      </div>
    );
  }
}
于 2020-05-24T22:55:32.087 回答