एचटीएमएल स्ट्रिंग को एक वास्तविक घटक

Question

में वास्तविक HTML के रूप में प्रस्तुत करें यहां मैंने कोशिश की है और यह कैसे गलत हो जाता है।

यह काम करता है:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> 

यह नहीं करता है:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> 

---

विवरण संपत्ति सिर्फ HTML सामग्री का एक सामान्य स्ट्रिंग है। हालांकि इसे एक स्ट्रिंग के रूप में प्रस्तुत किया गया है, किसी कारण से HTML के रूप में नहीं।

कोई सुझाव?

Answer 1

जांच करें कि पाठ आप नोड के लिए संलग्न करने के लिए कोशिश कर रहे हैं कोई इस तरह से बच गया है :

var prop = { 
    match: { 
     description: '<h1>Hi there!</h1>' 
    } 
}; 

इसके बजाय इस बात का

:

var prop = { 
    match: { 
     description: '<h1>Hi there!</h1>' 
    } 
}; 

अगर मैं बच निकला है आप इसे अपने सर्वर से बदलना चाहिए।

नोड पाठ क्योंकि

बच रहा है नोड एक डोम नोड है क्योंकि भाग निकले नहीं है

Answer 2

क्या this.props.match.description एक स्ट्रिंग या ऑब्जेक्ट है? यदि यह एक स्ट्रिंग है, तो इसे HTML में परिवर्तित किया जाना चाहिए ठीक है। उदाहरण:

class App extends React.Component { 

constructor() { 
    super(); 
    this.state = { 
     description: '<h1 style="color:red;">something</h1>' 
    } 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={{ __html: this.state.description }} /> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('root')); 

परिणाम: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

लेकिन अगर उद्धरण '' आप प्राप्त करने के लिए जा रहे हैं बिना description: <h1 style="color:red;">something</h1>:

​Object { 
$$typeof: [object Symbol] {}, 
    _owner: null, 
    key: null, 
    props: Object { 
    children: "something", 
    style: "color:red;" 
    }, 
    ref: null, 
    type: "h1" 
} 

तो यह एक स्ट्रिंग है और आप किसी भी HTML मार्कअप नहीं दिख रहा है एकमात्र समस्या जो मैं देखता हूं वह गलत मार्कअप है ..

अद्यतन

यदि आप HTMLEntitles से निपट रहे हैं। आप dangerouslySetInnerHTML कि है क्यों वे यह खतरनाक तरीके से कहा जाता है :)

कार्य उदाहरण के लिए उन्हें भेजने से पहले उन्हें डिकोड करने के लिए की जरूरत है:

class App extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     description: '<p><strong>Our Opportunity:</strong></p>' 
    } 
    } 

    htmlDecode(input){ 
    var e = document.createElement('div'); 
    e.innerHTML = input; 
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; 
    } 

    render() { 
    return (
     <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} /> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('root'));