प्रतिक्रिया

Question

के साथ HTML- स्वरूपित पाठ प्रदर्शित करते समय Invariant उल्लंघन त्रुटि मैं एक प्रतिक्रिया अनुप्रयोग बना रहा हूं जिसके लिए कुछ पाठ प्राप्त करने के लिए बाहरी API का उपयोग करने की आवश्यकता है। समस्या यह है कि पाठ जोर दिखाने के लिए, उदाहरण के लिए HTML टैग के साथ एक स्ट्रिंग के रूप में वापस आ जाता है:

{ "text": ["The quick <em class='hl'>brown</em> fox"] } 

मैं इतना

{this.props.text.map(function(snippet) { 
    return <div dangerouslySetInnerHTML={{__html: snippet }}></div> 
})} 

जो समय के सबसे अधिक काम किया जैसे dangerouslySetInnerHTML का उपयोग किया गया था, लेकिन मैं उदाहरण हैं जिनमें पाठ API द्वारा इस तरह से स्वरूपित किया गया है कि प्रतिक्रिया निम्न त्रुटि फेंकता में चल रहा हूँ:

Uncaught (in promise) Error: Invariant Violation: 
Danger: Expected markup to render 7 nodes, but rendered 4 

ऐसा लगता है वहाँ वर्तमान में है कोई catch errors in the render function के लिए रास्ता, इसलिए मैं केवल समस्याग्रस्त लोगों को अनदेखा नहीं कर सकता हूं और जारी रख सकता हूं।

टेक्स्ट जोर या चीजों के साथ हाइलाइट करने जैसी चीजों को संभालने का एक बेहतर तरीका है, या शायद स्ट्रिंग को फ़िल्टर या जाल करने का कोई तरीका है जो प्रतिक्रिया को समस्याग्रस्त हो सकती है?

Answer 1

यह समस्या वास्तव में गूढ़ है! मैंने देखा कि कभी-कभी टेक्स्ट स्निपेट्स को प्रदर्शित करने का प्रयास किया गया था जिसमें < या > शामिल थे, जो प्रतीत होता है कि प्रतिक्रियाएं फेंक रही थीं।

मैं एक regex टैग मैं रखने के लिए कामना की पर बदल दिया (उनमें वर्ग और समापन टैग के लिए *** के साथ शुरू टैग के लिए @@@ के साथ प्रतिस्थापित), < या > के सभी उदाहरणों हटा दिया, और फिर साथ प्लेसहोल्डर बदल दिया उनका मूल मार्कअप।

इन अतिरिक्त प्रतीकों को हटाने से समस्या ठीक हो गई है।

Answer 2

मुझे यह समस्या तब मिली है जब एचटीएमएल खतरनाक रूप से पास हो गया है SetInnerHTML अपरिभाषित है, या विकृत है, उदा। html() को HTML (जैसे) स्ट्रिंग करने की कोशिश कर रहा है जैसे कि यह एक स्ट्रिंग था जो इसे अमान्य मानता है।

<div dangerouslySetInnerHTML={{ __html: content.substring(0, 360) }} />