Aframe注销组件 [英] Aframe unregister component

问题描述

我正在学习如何使用react和redux退出。我正在创建自定义组件，并在我的reactjs componentWillMount生命周期事件中注册它们。例如：我正在将射线广播的结果发送到父反应组件，以将其保存以用于其他目的。

I am using learning about how to aframe with react and redux. I am creating custom components and registering them in my reactjs componentWillMount lifecycle event. For example: I am sending the result of my raycasting to the parent react component to be saved off for other purposes. This works great.

import React, {Component, PropTypes} from 'react'

export default class AframeComponent extends Component {
  static propTypes = {
    cb: PropTypes.func.isRequired
  }

  componentWillMount () {
    const {AFRAME} = window
    const aframeComponent = this

    if (!AFRAME) return

    if (!AFRAME.components['sphere-listener']) {
      AFRAME.registerComponent('sphere-listener', {
        init () {
          const {el} = this
          el.addEventListener('mouseup', (evt) => {
            const camera = document.querySelector('#camera')
            aframeComponent.handleRaycast(evt.detail.intersection.point, camera.components.rotation)
          })
        }
      })
    }
  }

  handleRaycast (position, rotation) {
    const {cb} = this.props

    /* do cool stuff here with the position and rotation */

    this.setState({position, rotation}, () => {
      cb(position, rotation)
    })
  }

  render () {
    return (
      <a-scene>
        <a-sphere radius="30" sphere-listener />
        <a-entity id="camera" look-controls mouse-cursor>
          <a-cursor fuse="true" color="yellow" />
        </a-entity>
        {/* cool stuff happens here */}
      </a-scene>
    )
  }
}

我在用框架卸下react组件时遇到问题并稍后将其重新安装在应用程序中。我遇到了错误，但是它们很有意义。我正在注册AFRAME的组件正在查找对 AframeComponent 的特定实例的对象引用，该实例在第二次加载该组件时不再存在。

I'm encountering issues when I unmount the react component with aframe and remount it later in the app use. I'm getting errors but they make sense. The component I am registering an AFRAME is looking an object reference to a specific instance of AframeComponent that no longer exists the second time the component is loaded.

我还没有找到正式注销组件的方法。我已经能够使它正常工作，但是感觉很hacky。在可以卸载的组件中，我可以手动删除组件，然后允许它们重新注册。 删除AFRAME.components ['sphere-listener']

I have not found a way to officially unregister a component. I have been able to make it work but it feels hacky. In my component will unmount I can manually delete components then allow them to be re registered. delete AFRAME.components['sphere-listener']

问题：

1. 是否可以使用AFRAME.unregisterComponent（）？


2. 我是因为组件具有状态依赖性而错误地构建了它们吗？我开始认为它们应该是无状态的。


3. 如果是的话，如何将函数从react类传递到架构中？像这样：< a-sphere radius = 30 sphere-listener = { cb：$ {（）=> {console.log（'call back'）}} } } />

1. Is there a way to AFRAME.unregisterComponent()?
2. Am I just building components incorrectly as they have a state dependency? I'm beginning to think they should be stateless.
3. If so how do I pass a function from a react class into the schema? Like this: <a-sphere radius="30" sphere-listener={cb: ${() => { console.log('call back') }}} />

谢谢，

Jordan

推荐答案

组件应在全局级别注册，而不是在运行时注册。您不应像注册DOM元素那样注册和注销组件，因为这样做没有太多好处。但是，如果您必须：删除AFRAME.components [’sphere-listener'] 。 编辑：我确实看到您正在尝试将React变量封闭到组件中。注册/取消注册还可以，但是我建议将它们去耦。

Components should be registered at a global level, not at runtime. You should not be registering and unregistering components like you would DOM elements since there's not much benefit. But if you have to: delete AFRAME.components['sphere-listener']. EDIT: I do see you're trying to closure React variables into a component. Register/unregister kinda works, but I suggest decoupling them.

如果需要将数据传递到组件中，可以使用 schema ，并通过模式绑定数据（例如， somecomponent = {{foo：this.state.blah}} ）。

If you need to pass data into a component, you can use the schema, and bind data through the schema (e.g., somecomponent={{foo: this.state.blah}}).

您无法传递函数。您应该使用事件侦听器进行通信< Entity events = {{collide：（）=> {}}> ，您可以在A-Frame级别发出事件。

You can't pass functions. You should use event listeners for communication <Entity events={{collide: () => {}}> and you can emit events at the A-Frame level.

重要的是要区分在A中应该执行的操作-Frame组件（3D，VR，事件）以及应在React级别上执行哪些操作（视图层，数据绑定）。

Important to distinguish between what operations you should do within A-Frame components (3D, VR, events) and what operations you should do at the React level (view layer, data binding).

这篇关于Aframe注销组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！