用aframe-react的编码风格为A-Frame编写脚本

Question

我发现aframe-react与A-Frame-School coding相比有很大的不同，特别是在脚本方面。我可以创建所有的条目并使用基本组件，但是如果我想改编一些脚本，比如：

    <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 

...etc (代码被裁剪)

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

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

Answer 1

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

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

然后在应用程序的入口点只需导入模块即可。

import 'aframe-helper'