प्रतिक्रिया के साथ सामग्री डिजाइन लाइट का उपयोग

Question

मैं एक मौजूदा प्रोजेक्ट पर एमडीएल का उपयोग करने की कोशिश कर रहा हूं जो प्रतिक्रिया का उपयोग करता है, और मैं कई मुद्दों पर चल रहा हूं। हालात पहले लोड पर ठीक लगता है, हालांकि कई चेतावनी संदेश हैं:

Warning: ReactMount: Root element has been removed from its original container. New container:

यह हर डोम तत्व एक वर्ग एमडीएल (उदाहरण के द्वारा मान्यता प्राप्त है के लिए काफी होता है: एमडीएल-लेआउट, एमडीएल-layout__content, आदि) और यह किसी भी डोम परिवर्तन पर होता है।

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.1.1.0.0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)...

यह है कि एमडीएल मतलब यह है और प्रतिक्रिया काफी असंगत हैं:

इसके अलावा, जब मार्गों को बदलने, एक "Invariation उल्लंघन" त्रुटि है?

अद्यतन: समस्या तब गायब हो जाती है जब वर्ग = "mdl-js-layout" वाला तत्व प्रतिक्रिया कार्यों में सबसे ऊपर तत्व नहीं है। एक बार जब मैंने उस तत्व को लपेट लिया, तो सब अच्छा है।

Answer 1

पहली और दूसरी त्रुटियां एक दूसरे से संबंधित हैं, MDL's layout source code पर एक नज़र डालें। मैं कहूँगा कि निम्नलिखित अपनी प्रतिक्रिया मूल तत्व के उत्परिवर्तन (जो mdl-js-layout घटक है) का कारण बनता है:

var container = document.createElement('div'); 
container.classList.add(this.CssClasses_.CONTAINER); 
this.element_.parentElement.insertBefore(container, this.element_); 
this.element_.parentElement.removeChild(this.element_); 
container.appendChild(this.element_); 

आप official example पर एक नज़र डालें, तो आप देख सकते हैं कि एमडीएल बड़े पैमाने पर अपने मार्कअप बदलता है और वह यह है कि वास्तव में क्या पसंद नहीं है।

---

Btw: मैं भी an article जो एमडीएल के साथ प्रतिक्रिया के संयोजन का अध्ययन करता है बना है।

Answer 2

बाहर एक डीआईवी तत्व लपेटने का प्रयास करें, मैंने अभी इस समस्या को ठीक किया है।

आप उपयोग कर रहे हैं Redux + प्रतिक्रिया + एमडीएल + प्रतिक्रिया-रूटर, आप प्रदाता तत्व करने के लिए एक DIV तत्व लपेट कर सकते हैं:

import React, { createStore }  from 'react'; 
import { Provider }    from 'react-redux'; 
import Router, { HistoryLocation } from 'react-router'; 

var store = createStore(); 

Router.run(routes, HistoryLocation, (Handler, state) => { 
    React.render((
     <div> 
      <Provider store={store}> 
      { 
       () => <Handler {...state} /> 
      } 
      </Provider> 
     </div> 
    ), document.body); 
}); 

आशा है कि यह आप :) मदद कर सकते हैं