Question

我发现与A-Frame-School编码相比，aframe-react非常不同，特别是对脚本的关注。我可以制作所有的内容和使用基本组件，但如果我想调整这样的脚本怎么办？：

    <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代码，但我不知道该把它放在哪里。

有谁能告诉我如何＆＃34; port＆＃34;编码到aframe-react编码风格，好吗？或者感谢任何领导者的反对或消息中的正确脚本编写方式。

Answer 1

You can place your registerComponent code in its own module. For example you can place the code in aframe-helper.js

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

and then in your app's entry point just import the module.

import 'aframe-helper'

为A-Frame制作aframe-react编码风格的脚本

1 个答案: