Shadow DOM和ReactJS

Question

我在我的应用程序中使用Web组件。在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

我尝试使用content的Web组件API，但随后它在顶部而不是内部组件中呈现。任何引导如何使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>

Answer 2

嘿，我的朋友，我花时间为我们制作了这个：

// ShadowRoot.js

import React from "react";

export class ShadowRoot extends React.Component {

    attachShadow(host) {
        if (host == null) {
            return;
        }
        host.attachShadow({mode: "open"});
        host.shadowRoot.innerHTML = host.innerHTML;
        host.innerHTML = "";
    }

    render() {
        return (
            <span ref={this.attachShadow}>
                {this.props.children}
            </span>
        );
    }

}

像这样使用它：

<ShadowRoot>
    // put stuff here you want inside shadow root
</ShadowRoot>

需要考虑的 2 件事：

• React.Component 类的效果比 hook 等效
• innerHTML 的东西有点老套，状态更新不适用于此组件