Shadow DOM和ReactJS

Question

我在我的应用程序中使用了Web组件。而在一个Web组件中，我需要插入一个反应组件。 Web组件具有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

如果要将其插入到Web组件的阴影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>