Aframe 注销组件

Question

我正在学习如何使用 React 和 Redux 构建框架。我正在创建自定义组件并将它们注册到我的 reactjs componentWillMount 生命周期事件中。例如：我将我的光线投射结果发送到父 React 组件，以便保存起来用于其他目的。这很好用。

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 卸载反应组件并稍后在应用程序使用中重新安装时遇到问题。我收到错误，但它们是有道理的。我正在注册 AFRAME 的组件正在查找对 AframeComponent 的特定实例的对象引用，该实例在第二次加载组件时不再存在。

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

问题：

有没有办法AFRAME.unregisterComponent()?
我只是错误地构建了组件，因为它们具有状态依赖性？我开始觉得他们应该是无国籍的。
如果是这样，我如何将函数从反应 class 传递到架构中？像这样： <a-sphere radius="30" sphere-listener={cb: ${() => { console.log('call back') }}} />

谢谢，

约旦

Answer 1

组件应该在全局级别注册，而不是在运行时注册。您不应该像 DOM 元素那样注册和取消注册组件，因为这样做没有太大好处。但是如果你必须：delete AFRAME.components['sphere-listener']。编辑：我确实看到您正在尝试将 React 变量关闭到一个组件中。 Register/unregister 有点效果，但我建议将它们解耦。

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

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

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

Aframe 注销组件

Aframe unregister component

reactjs

aframe