Shadow DOM 和 ReactJS

Question

我在我的应用程序中使用网络组件。在 Web 组件中，我需要插入一个 React 组件。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

我尝试使用contentWeb 组件 API，但随后它呈现在组件顶部而不是内部。有什么线索可以让 React 组件在 Shadow DOM 中渲染吗？

Answer 1

如果要将其插入到 Web 组件的 Shadow DOM 中，请首先选择该组件（例如使用querySelector），然后选择其包含的 Shadow ( 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').attachShadow({ 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>