javascript - 使用 aframe-react 的 A-Frame 编码风格制作脚本

Question

我发现 aframe-react 与 A-Frame-School 编码相比非常不同，尤其是在脚本方面。我可以制作所有实体并使用基本组件，但是如果我想调整像这样的脚本怎么办？:

    <script>
        AFRAME.registerComponent('score-counter', {
          schema: {
            el: {
              type: 'selector'
            },
            score:{
              type: 'int',
              default: 0
            },
          },

          init: function () {
            var sceneEl = document.querySelector('a-scene'); 
            var scoreBoard = document.querySelector('#score');

            sceneEl.querySelector('a-box').addEventListener('mouseenter', () => {
              this.data.score++;
              var newScore = 'Score: ' + this.data.score
              scoreBoard.setAttribute('text', 'value',  newScore)
            })
          }
        });
        </script>

我将此作为有效的 a-frame-react 代码的示例，但找不到如何适应这一点:

import React from 'react';
import { Entity } from 'aframe-react';

import WinLine from './win-line'

const SYMBOL_COUNT = 12;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

class Bonus extends React.Component {
  constructor(props) {
    super(props)

    var symbols = [];
    var house = [];
    for (var s = 0; s < SYMBOL_COUNT; ++s) {
      house.push({ s: getRandomInt(0, 3), x: s * 9, k: "sym-" + s });
    }
    symbols.push(house);

    this.state = {
      symbols: symbols
    };
  }

  bonus() {
    setTimeout(() => this.props.main.typeBonusA(), 6500);
  }

  render() {
    if (this.props.modeI === "in") {
      return (null)
    }
    else if (this.props.clip === "mon") {
      return (

          {this.bonus()}
        </Entity>
      )
    }
    else {
      return (
        <WinLine symbols={this.props.symbols} />
      )
    }
  }
}

export default Bonus 

...等(代码被删除)

在之前的回答中，人们给出了 JS 代码，但我不知道该把它放在哪里。

有人可以告诉我如何将 -code “移植”到 aframe-react 编码风格吗？或者aframe-react中正确的脚本编写方式，或者建议，任何线索都将受到感谢。

Answer 1

您可以将您的 registerComponent 代码放置在其自己的模块中。例如，您可以将代码放在 aframe-helper.js

中

import AFRAME from 'aframe';
AFRAME.registerComponent('score-counter', {...});

然后在应用程序的入口点导入该模块。

import 'aframe-helper'