影のDOMとReactJS

Question

私のアプリケーションでWebコンポーネントを使用しています。そして、Webコンポーネントでは、反応コンポーネントを挿入する必要があります。 Web ComponentにはShadow DOMがあります。次のように反応コンポーネントをレンダリングしようとすると、エラーが発生します。

comp = React.createElement(ReactElem, { 
    config: config, 
    onRender: handleRender 
}); 

ReactDOM.render(comp , self.shadowRoot.querySelector('#app1')); 

エラー

target container is not a dom element 

私は、WebコンポーネントAPIのcontentを使用しようとしたが、それはトップではなく内部のコンポーネントにレンダリングされます。 ReactコンポーネントをシャドーDOMの内部でレンダリングする方法はありますか？

Answer 1

ウェブコンポーネントのシャドーDOMの内側に挿入する場合は、まずコンポーネント（たとえばquerySelector）を選択し、そのシャドウ（shadowRoot）を選択します。簡単な例：

// Create React Element. 
 
class Example extends React.Component { 
 
    onClick() { 
 
    console.log('Shadow!') 
 
    } 
 
    render() { 
 
    return(
 
     <div onClick={this.onClick}>Hello World!</div> 
 
    ); 
 
    } 
 
} 
 

 
// Create web component with target div inside it. 
 
const container = document.createElement('app'); 
 
document.body.appendChild(container); 
 

 
// Add shadow root to component. 
 
const shadow = document.querySelector('app').createShadowRoot({ mode: 'open' }); 
 

 
// Select the web component, then the shadowRoot. 
 
const target = document.querySelector('app').shadowRoot; 
 

 
ReactDOM.render(<Example />, target);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>