Renderowanie elementów z polimeru 1.0 z treściami podrzędnymi za pomocą React

Question

Od pewnego czasu borykam się z tym problemem i wreszcie udało mi się wyśledzić przyczynę problemu, ale nie wiem, jak go rozwiązać!

Rozważmy renderowania elementów polimerowych jest w React renderowanie metodą:

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

Poprzedni kod działa dobrze, ponieważ <paper-button> ma żadnych elementów podrzędnych. Ale Poniższy przykład nie działa:

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') 
); 

Ponieważ <paper-dialog> ma kilka elementów podrzędnych. W bibliotece Polymersa znajduje się znacznik <content>, który reprezentuje elementy podrzędne w podanym niestandardowym znaczniku i jak powinny one zostać osadzone w ostatecznej realizacji niestandardowego znacznika (działa jak portal). Wydaje się, że kiedy React jest używany do dodania elementu polimerowego do dokumentu, elementy potomne nie są przekazywane przez portal!

Gdy wspomniano elementem paper-dialog Polymer przechodzi React, to co wychodzi:

 
<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> 

To w przypadku, jeśli mogę to zrobić jak google polecił (wprowadzenie tagów wewnątrz HTML zacząć), oto jak będzie wyglądać drzewo domenowe:

 
<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> 

Części pogrubione to części niezgodne.

Czy ktoś wie, jak właściwie dopasować polimer z React?

Answer 1

Czy próbowałeś owijania <paper-dialog> w drugi składnik reakcji i następnie karmienie go do ReactDOM jak ten

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'));