如何避免剥夺帧属性？

Question

我有一个使用raycaster和游标组件的框架页面(没有反应)的简短示例。HTML如下所示：

          <a-scene>
            <a-entity raycaster="objects: .clickable" cursor="rayOrigin: mouse"></a-entity> 
            <a-plane class="clickable" color="yellow" position="0 1.5 -3" onclick="handleClick()"></a-plane>        
            <a-sky color="blue"></a-sky>
          </a-scene>`

当我呈现这个HTML并查看DOM时，我可以看到raycaster和游标属性以及它们的数据。根据最新的react，从React v16开始，HTML元素上的未知属性应该通过JSX传递。但是，通过React输出的相同的HTML属性会被剥离，如下所示：

      ReactDOM.render(
          <a-scene>
            <a-entity raycaster="objects: .clickable" cursor="rayOrigin: mouse"></a-entity> 
            <a-plane class="clickable" color="yellow" position="0 1.5 -3" onclick="handleClick()"></a-plane>        
            <a-sky color="blue"></a-sky>
          </a-scene>,
        document.getElementById('root')
      );

如果我在运行这个第二个react示例时检查DOM，它看起来是：<a-entity raycaster cursor></a-entity>

如果我在属性名的前面添加" data -“，它会传递数据，但是它有错误的名称，而一个框架看不到它。我在这里做错什么了？

Answer 1

该守则将起作用：

<a-scene>
    <a-entity raycaster="objects: .clickable" cursor="rayOrigin: mouse" />
    <a-plane class="clickable" color="yellow" position="0 1.5 -3" onClick={handleClick} />
    <a-sky color="blue" />
</a-scene>

问题是a-平面不是用于反应的，所以className不工作，但是class -工作。但与此同时，onclick="handleClick()"不能工作，onClick={handleClick}也可以工作。

此外，还有另一种方法来定义应该交叉的内容：

raycaster="objects: [dataRaycastable]"

然后，例如

<a-plane dataRaycastable={true} ... />