React

Question

kullanarak alt içeriğe sahip Polymer 1.0 öğeleri Rendering Bir süredir bununla uğraşıyordum ve sonunda sorunun kökünü bulmayı başardım, ancak nasıl çözeceğimi bilmiyorum!

bir hale Tepki yönteminde polimer en elemanları render düşünün: <paper-button> Herhangi bir alt öğe var çünkü

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

Önceki kod çalışıyor. Ama Aşağıdaki örnek çalışmaz: <paper-dialog> birkaç alt öğelere sahip

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

çünkü. Polymer'ın kütüphanesinde, özel etiketinde verilen alt öğeleri ve özel etiketin son gerçekleştirilmesinde nasıl katıştırılacağını temsil eden bir <content> etiketi vardır (bir portal gibi davranır). React, bir Polimer elemanını belgeye eklemek için kullanıldığında, çocuk elemanları portaldan geçmez! söz paper-dialog Polimer elemanı geçer Tepki zaman

, bu çıkar şudur:

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

O Yaparsam google (başlamak HTML içindeki etiketler koyarak talimat gibi bu durumda var), dom domuzu şu şekilde görünecektir:

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

Kalın bölümler anlaşmazlık parçalarıdır.

Polimer'i React ile eşleştirmeyi bilen var mı?

Answer 1

başka içine <paper-dialog> sarma denediniz bileşeni tepki ve sonra yaptım Şimdi bu

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