घटक प्रतिक्रिया करने के लिए गतिशील एचटीएमएल स्ट्रिंग

Question

मुझे अपने टेम्पलेट प्रतिपादन से गतिशील एचटीएमएल सामग्री मिल जाएगी जो अन्य प्रतिक्रिया घटकों द्वारा प्रदान की गई थी। मैं इस एचटीएमएल स्ट्रिंग को घटक को वापस करने के लिए कैसे परिवर्तित करूं ताकि मैं अपने रेंडर फ़ंक्शन में घटक का उपयोग कर सकूं। ध्यान दें कि मैं diffing के लिए इस्तेमाल प्रतिक्रिया विशिष्ट विशेषताओं को संरक्षित करना चाहता हूँ।

React.createClass({ 
 
    var self = this; 
 

 
    componentWillMountDown : function() { 
 
    //htmlString is essentially huge dynamic one in my actual case 
 
    var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>"; 
 
    self.setState({responseString : htmlString}); 
 
    self.forceUpdate(); 
 
    }, 
 
    
 
    render: function() { 
 
    var Response = this.state.responseString; 
 
    //how would I return the react component as response? 
 
    return (<Response/>); //does not work. err is it shd be valid react component 
 
    } 
 
});

मैं HTMLDocument वस्तु को htmlString बदलने और रिकर्सिवली willmount कॉलबैक और सेटिंग में React.createElement बनाने की कोशिश की है घटक प्रतिक्रिया होती है। हालांकि, त्रुटि प्रकार है अपरकेस परिभाषित नहीं है।

Answer 1

क्योंकि आप अपने घटक को स्ट्रिंग के रूप में संग्रहीत करते हैं, इसलिए आपको dangerouslySetInnerHTML का उपयोग करना होगा। यह मेरा सुझाव है। मुझे उम्मीद है कि किसी और के पास बेहतर जवाब होगा। :)

render: function() { 
    var self = this; 
    var Response = React.createClass({ 
     render: function(){ 
     return (<div dangerouslySetInnerHTML={{__html: self.state.responseString}}></div>) 
     } 
    }); 
    return (
      <Response /> 
    ) 
    } 

Answer 2

कुछ घंटे पहले, मैंने NPM (https://www.npmjs.com/package/html-to-react) आप मदद कर सकते हैं में एक html-to-react मॉड्यूल प्रकाशित किया।

अगर आपको कुछ भी चाहिए तो कृपया मुझे बताएं, मैं मॉड्यूल को अधिक लचीला बनाने के लिए निश्चित रूप से आपके साथ काम कर सकता हूं।