Question

是否可以使用A-frame创建下面的伪代码组件？我在我的项目中根本不使用React / Babel，但我喜欢React / Babel的语法。

AFRAME.registerComponent('myComponent', {
    init: function () {
        this.location;

        return (
            <a-entity location={this.location}>
                <a-image src="./1.png" />
                <a-image src="./2.png" />
            </a-entity>
        );
    }
});

我将使用下面的pseude代码重用此组件：

var comp = document.querySelector('a-scene').components.myComponent;
comp.location = `${Math.random() * 10} ${Math.random() * 10} ${Math.random() * 10}`;
document.querySelector('a-scene').appendChild(comp);

Answer 1

实际上有类似的东西，你可以在KFrame中使用模板组件（作者是A-Frame的开发者Kevin Ngo）。它支持多种模板样式和字符串插值！ A-Frame template component

关于此回购索引的示例应该是自我解释的。

Answer 2

您可以在没有React（但使用Babel）的情况下使用JSX来创建元素，因为它将调用转换为createElement。我没有尝试过，但只是一种可能性。

this.el.appendChild(
  <a-entity>
    <a-box></a-box>
  </a-entity>
);

我可以使用类似代码的React注册组件并使用A-frame将其恢复吗？

2 个答案: