How do I keep react from stripping a-frame attributes?

Question

I have a short example of an a-frame page (without React) that uses the raycaster and cursor components. The HTML looks like this:

          <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>`

When I render this HTML and view the DOM, I can see the raycaster and cursor attributes along with their data. According to the latest react docs, starting with React v16, unknown attributes on HTML elements should get passed through JSX. However, the attributes get stripped with the same HTML outputted through React, like this:

      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')
      );

If I inspect the DOM when this second react example is running, it looks like:<a-entity raycaster cursor></a-entity>

If I add "data-" to the front of the attribute name, it passes the data, but then it has the wrong name and a-frame doesn't see it. What am I doing wrong here?

Answer 1

That code will work:

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

The problem was that a-plane is not for React, so className doesn't work, but class - works. But at the same time onclick="handleClick()" doesn't work, and onClick={handleClick} works.

Also there is another way to define what should be intersected:

raycaster="objects: [dataRaycastable]"

and then for example

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