如何将反应组分从反应外部附加到现有反应实例

Question

我有一个自定义元素，在其中我想使用react并附加到父实例，以便整个东西可以作为一个。

// main.js 
function App () {
  return (
    <div>
     <h1>Hello World</h1>
     <x-message>Hello World</x-message>
    </div>
  )
}

// x-message.js
class XMessage extends HTMLElement {
   connectedCallback(){
      this.__reactInternalInstance.moundChild(React.createElement('a',{}, ...))
   }
}

我想渲染另一个元素并将其附加到x-message元素内的父反应上下文。

这是example。

此示例适用于chrome和支持自定义元素的浏览器。正如您所看到的，在呈现子元素时，它对父级和父级上下文一无所知。