レンダリングポリマー1.0要素（子要素のあるコンテンツ）（リアクションを使用）

Question

私はしばらくこの問題に苦労していましたが、最終的には問題の根本を追跡することができましたが、解決方法はわかりません。

はレンダリングリアクト法では、ポリマーの要素をレンダリング考えてみましょう： <paper-button>が子要素を持っていないので、

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

前のコードが正常に動作します。ただし、次の例は機能しません。

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

<paper-dialog>にはいくつかの子要素があるためです。 Polymerのライブラリには、指定されたカスタムタグに与えられた子要素を表す<content>タグと、それらがカスタムタグの最終的な実現に埋め込まれる方法（ポータルのように機能する）があります。 Reactを使ってPolymer要素を文書に追加すると、子要素はポータルを通過しないようです！

述べpaper-dialogポリマー要素が通過反応になると、これが出てくるものです：

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

それはそもそもHTML内のタグを入れてGoogleが指示したとして、私はそれを行う場合（この場合です）、ドームツリーは次のようになります。

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

太字の部分は不一致部分です。

実際にPolymerとReactをマッチングさせる方法を知っている人はいますか？

Answer 1

はあなたが別のものに<paper-dialog>をラップしようとしたしたコンポーネントに反応して、私は今、この

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