प्रतिक्रिया

Question

का उपयोग कर बाल सामग्री के साथ पॉलिमर 1.0 तत्वों को प्रस्तुत करना मैं थोड़ी देर के लिए इसके साथ संघर्ष कर रहा हूं और अंततः मैं समस्या की जड़ को ट्रैक करने में कामयाब रहा, फिर भी मुझे नहीं पता कि इसे कैसे हल किया जाए!

एक प्रतिक्रिया प्रस्तुत करना विधि में पॉलिमर के तत्वों प्रतिपादन पर विचार करें:

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

पिछला कोड ठीक काम करता है के बाद से <paper-button> कोई भी बच्चा तत्वों मिल गया है। लेकिन निम्न उदाहरण काम नहीं करता:

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> कई बच्चे तत्व है। पॉलिमर पुस्तकालय में <content> टैग है जो नामित कस्टम टैग में दिए गए बच्चों के तत्वों का प्रतिनिधित्व करता है और कस्टम टैग के अंतिम अहसास में उन्हें कैसे एम्बेड किया जाना चाहिए (यह एक पोर्टल की तरह कार्य करता है)। ऐसा लगता है कि दस्तावेज़ में पॉलिमर तत्व जोड़ने के लिए प्रतिक्रिया का उपयोग कब किया जाता है, बच्चे तत्व पोर्टल के माध्यम से पारित नहीं होते हैं!

जब उल्लेख 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> 

यह मामला है कि यदि मैं यह कर गूगल (एचटीएमएल अंदर टैग लगाने के साथ शुरू करने के निर्देश दिए है के रूप में में है), यहां डोम पेड़ जैसा दिखता है:

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

बोल्ड में मौजूद हिस्सों असहमति भागों हैं।

क्या किसी को वास्तव में प्रतिक्रिया के साथ पॉलिमर से मिलान करने का तरीका पता है?

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