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>