Aframe注销组件

Question

我正在学习如何使用aframe和redux。我正在创建自定义组件，并在reactjs componentWillMount生命周期事件中注册它们。例如:我将光线投射的结果发送给父反应组件，以避免用于其他目的。这个很好用。

​

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>
    )
  }
}

​

当我用aframe卸载react组件并在以后的应用程序中重新安装它时，我遇到了一些问题。我正在犯错误，但它们是有道理的。我正在注册AFRAME的组件正在查找一个对象引用，该对象引用是在第二次加载组件时不再存在的特定AframeComponent实例的。

我还没有找到正式注销组件的方法。我一直能让它正常工作，但感觉很烦躁。在我的组件将卸载，我可以手动删除组件，然后允许他们重新注册。delete AFRAME.components['sphere-listener']

问题：

1. 有通往AFRAME.unregisterComponent()的方法吗？
2. 我是否只是错误地构建组件，因为它们具有状态依赖关系？我开始觉得他们应该是无国籍的。
3. 如果是这样的话，我如何将函数从react类传递到模式中？像这样：<a-sphere radius="30" sphere-listener={cb：${() => { console.log('call back') }}} />

谢谢,

乔丹

Answer 1

组件应该在全局级别注册，而不是在运行时注册。您不应该像DOM元素那样注册和注销组件，因为这并没有什么好处。但如果有必要的话：delete AFRAME.components['sphere-listener']。编辑：我确实看到您试图将响应变量关闭到组件中。注册/取消注册是可行的，但我建议将它们解耦。

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

你不能传递函数。您应该使用事件侦听器进行通信<Entity events={{collide: () => {}}>，并且可以在A帧级别发出事件。

区分在A帧组件(3D、VR、events)中应该做什么操作和在反应级别(视图层、数据绑定)上应该做什么操作非常重要。