Rendering Polymer 1.0 Elemente mit Kind Inhalt mit React

Question

Ich habe mit diesem eine Weile gekämpft und schließlich gelang es mir, die Wurzel des Problems aufzuspüren, aber ich weiß nicht, wie ich es lösen soll!

Betrachten Polymer der Elemente in einer Reaktion render Methode Rendering:

ReactDOM.render(
    <paper-button>Ok</paper-button>, 
    document.getElementById('root') 
); 

Zurück Code funktioniert gut, da <paper-button> keine untergeordneten Elemente erhalten hat. Aber das folgende Beispiel funktioniert nicht:

ReactDOM.render(
    <paper-dialog> 
     <h2>Header</h2> 
     <paper-dialog-scrollable> 
      Lorem ipsum... 
     </paper-dialog-scrollable> 
     <div class="buttons"> 
      <paper-button dialog-dismiss>Cancel</paper-button> 
      <paper-button dialog-confirm>Accept</paper-button> 
     </div> 
    </paper-dialog>, 
    document.getElementById('root') 
); 

Da <paper-dialog> mehr untergeordneten Elemente hat. In der Polymer-Bibliothek gibt es ein <content>-Tag, das die untergeordneten Elemente darstellt, die in dem benannten benutzerdefinierten Tag angegeben sind, und wie sie in die endgültige Realisierung des benutzerdefinierten Tags eingebettet werden sollen (es verhält sich wie ein Portal). Es scheint, als wenn React verwendet wird, um ein Polymer-Element in das Dokument hinzuzufügen, werden die untergeordneten Elemente nicht durch das Portal geleitet!

Wenn das erwähnte paper-dialog Polymer Element React durchläuft, ist es das, was herauskommt:

 
<paper-dialog data-reactroot=""> 
    <h2>Header</h2> 
    <paper-dialog-scrollable 
     class="x-scope paper-dialog-scrollable-0 no-padding scrolled-to-bottom"> 
     Lorem ipsum... 
    </paper-dialog-scrollable> 
    <div> 
     <paper-button 
      role="button" tabindex="0" 
      animated="" aria-disabled="false" 
      elevation="0" dialog-dismiss="true" 
      class="x-scope paper-button-0"> 
      Cancel 
     </paper-button> 
     <paper-button 
      role="button" tabindex="0" 
      animated="" aria-disabled="false" 
      elevation="0" dialog-confirm="true" 
      class="x-scope paper-button-0"> 
      Accept 
     </paper-button> 
    </div> 
</paper-dialog> 

Es ist in dem Fall, dass, wenn ich es tun, wie Google (setzen Sie die Tags in der HTML angewiesen hat, mit zu beginnen,), hier ist wie dom baum aussehen wird:

 
<paper-dialog> 
    <h2>Header</h2> 
    <paper-dialog-scrollable 
     class="x-scope paper-dialog-scrollable-0 no-padding can-scroll"> 
     <div id="scrollable" 
      class="scrollable style-scope paper-dialog-scrollable fit"> 
      Lorem ipsum... 
     </div> 
    </paper-dialog-scrollable> 
    <div class="buttons"> 
     <paper-button 
      role="button" tabindex="0" 
      animated="" aria-disabled="false" 
      elevation="0" dialog-dismiss="" 
      class="x-scope paper-button-0"> 
      Cancel 
     </paper-button> 
     <paper-button 
      role="button" tabindex="0" 
      animated="" aria-disabled="false" 
      elevation="0" dialog-confirm="" 
      class="x-scope paper-button-0"> 
      Accept 
     </paper-button> 
    </div> 
</paper-dialog> 

Die Teile, die in Fettdruck sind, sind Meinungsverschiedenheiten Teile.

Weiß jemand, wie man Polymer mit React wirklich zusammenbringt?

Answer 1

Haben Sie versucht, die <paper-dialog> in eine andere Verpackung reagieren Komponente und Fütterung es dann an die ReactDOM wie diese

var PaperDialog = React.createClass({ 
    render: function() { 
     return (
      <paper-dialog> 
       <h2>Header</h2> 
       <paper-dialog-scrollable> 
        Lorem ipsum... 
       </paper-dialog-scrollable> 
       <div class="buttons"> 
        <paper-button dialog-dismiss>Cancel</paper-button> 
        <paper-button dialog-confirm>Accept</paper-button> 
       </div> 
      </paper-dialog>); 
    } 
}); 

ReactDOM.render(<PaperDialog />, document.getElementById('root'));