Ich habe einen speziellen Fall, in dem ich eine Reaktionskomponente mit einer Webkomponente kapseln muss. Das Setup scheint sehr einfach zu sein. Hier ist der Reaktionscode:

// React Component
class Box extends React.Component {
  handleClick() {
    alert("Click Works");
  }
  render() {
    return (
      <div 
        style={{background:'red', margin: 10, width: 200, cursor: 'pointer'}} 
        onClick={e => this.handleClick(e)}>

        {this.props.label} <br /> CLICK ME

      </div>
    );
  }
};

// Render React directly
ReactDOM.render(
  <Box label="React Direct" />,
  document.getElementById('mountReact')
);

HTML:

<div id="mountReact"></div>

Dies wird gut gemountet und das Klick-Ereignis funktioniert. Als ich jetzt einen Web Component-Wrapper um die React Component erstellt habe, wird dieser korrekt gerendert, aber das Click-Ereignis funktioniert nicht. Hier ist mein Web Component Wrapper:

// Web Component Wrapper
class BoxWebComponentWrapper extends HTMLElement {
  createdCallback() {
    this.el      = this.createShadowRoot();
    this.mountEl = document.createElement('div');
    this.el.appendChild(this.mountEl);

    document.onreadystatechange = () => {
      if (document.readyState === "complete") {
        ReactDOM.render(
          <Box label="Web Comp" />,
          this.mountEl
        );
      }
    };
  }
}

// Register Web Component
document.registerElement('box-webcomp', {
  prototype: BoxWebComponentWrapper.prototype
});

Und hier ist der HTML:

<box-webcomp></box-webcomp>

Ist da etwas, was ich vermisse? Oder weigert sich React, in einer Webkomponente zu arbeiten? Ich habe eine Bibliothek wie Maple.JS gesehen, die so etwas macht, aber ihre Bibliothek funktioniert. Ich fühle mich wie ich eine kleine Sache vermisse.

Hier ist der CodePen, damit Sie das Problem sehen können:

http: //codepen.io/homeslicesolutions/pen/jrrpL