प्रतिक्रियाशील परिवर्तनीय विवरण (JSX) के साथ HTML डालें

203

मैं रिएक्ट के साथ कुछ बना रहा हूं जहां मुझे जेएसएक्स में रिएक्ट वेरिएबल्स के साथ HTML सम्मिलित करने की आवश्यकता है। क्या वैसा ही वैरिएबल रखने का कोई तरीका है:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

और इस तरह से प्रतिक्रिया में सम्मिलित करने के लिए, और यह काम किया है?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

और क्या यह अपेक्षित रूप से HTML सम्मिलित करता है? मैंने किसी रिएक्शन फ़ंक्शन के बारे में कुछ भी नहीं देखा या सुना नहीं है जो इस इनलाइन, या चीजों को पार्स करने का एक तरीका हो सकता है जो इसे काम करने की अनुमति देगा।

— केली हॉचकिस
स्रोत

294

आप खतरनाक तरीके से उपयोग कर सकते हैं InnerHTML , उदा

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

— डगलस
स्रोत

2

यदि आपको कुछ जोड़ने की आवश्यकता है तो यह कैसे काम करता है <head>?

— डेनिएल मेडले

कंपोनेंटडिमाउंट में सामान्य डोम तरीके काम करने चाहिए, हालांकि मैंने इसे पहले नहीं किया है।

— डगलस

@DanielleMadeley क्या आप <IE> में सशर्त IE टिप्पणियाँ सम्मिलित करने का प्रयास कर रहे हैं? यदि हां, तो मुझे यहाँ बताई गई ट्रिक का उपयोग करने में सफलता मिली है: nemisj.com/conditional-ie-comments-in-react-js

— कैम जैक्सन

3

सुनिश्चित करें कि आप खतरनाक तरीके से InSHTML को एक विधि पास करते हैं और हैश नहीं करते हैं। डॉक्स के अनुसार, सिर्फ हैश पास करना खतरनाक है। संदर्भ: facebook.github.io/react/tips/dangerously-set-inner-html.html

— criticerz

1

क्या div डालने के बिना कोई रास्ता है?

— दोस्त

101

ध्यान दें कि dangerouslySetInnerHTMLखतरनाक हो सकता है यदि आप नहीं जानते कि आप HTML स्ट्रिंग में क्या हैं जो आप इंजेक्ट कर रहे हैं। ऐसा इसलिए है क्योंकि दुर्भावनापूर्ण क्लाइंट साइड कोड को स्क्रिप्ट टैग के माध्यम से इंजेक्ट किया जा सकता है।

यह शायद एक अच्छा विचार है कि अगर आप 100% सुनिश्चित नहीं हैं कि आप जिस HTML को प्रदान कर रहे हैं वह XSS (क्रॉस-साइट स्क्रिप्टिंग) सुरक्षित है, तो DOMPurify जैसी उपयोगिता के माध्यम से HTML स्ट्रिंग को साफ करें ।

उदाहरण:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

— यो वाकिता
स्रोत

@vsync यह नहीं होना चाहिए :)

— आर्टेम बर्नात्स्की

1

क्या यह संभव नहीं है कि न केवल html टैग बल्कि लाइब्रेरी से सामग्री यूआई अलर्ट टैग को टैग किया जाए। मैं चाहता हूं कि कोड इस तरह हो

import DOMPurify from 'dompurify'  const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >';   render: function() {     return (         <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>     ); }

— साशा रोमानोव

@sasharomanov, क्या आपको इस परिदृश्य के लिए कोई समाधान मिला?

— निमिष गोयल

51

dangerouslySetInnerHTML से के कई नुकसान हैं क्योंकि यह टैग के अंदर सेट है।

मैं आपको कुछ प्रतिक्रिया आवरण का उपयोग करने का सुझाव देता हूं जैसे कि मैंने इस उद्देश्य के लिए एनपीएम पर यहां पाया था। html-react-parser वही काम करता है।

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

बहुत आसान :)

— user2903536
स्रोत

3

"खतरनाक तरीके से InnerHTML को कई नुकसान हैं क्योंकि यह टैग के अंदर सेट है।" क्या आप इसके बारे में अधिक बता सकते हैं। एचटीएमएल-रिएक्शन-पार्सर और सैनेटाइज्ड इनरहेटलैम के बीच क्या मौलिक अंतर है, यह सोचने की कोशिश कर रहा हूं

— dchhetri

ऐसा लगता है कि html-react-parser इनपुट को पवित्र नहीं करता है

— Little Brain

28

उपयोग करके ''आप इसे स्ट्रिंग के लिए बना रहे हैं। उल्टे अल्पविराम के बिना उपयोग करें यह ठीक काम करेगा।

— iamnotbatma
स्रोत

14

पहले तो मैं हँसा और फिर उसे एक मौका दिया जिसने मेरे दिमाग को उड़ा दिया

— M at

1

अब तक का सबसे सरल उत्तर यदि विशेष रूप से HTML आपके द्वारा लिखा गया है और उपयोगकर्ता इनपुट के आधार पर गतिशील है। आप वास्तव में var myHtml = कुछ टेक्स्ट सेट कर सकते हैं; और यह काम करता है

— pat8719

1

यह सबसे अच्छा जवाब है। धन्यवाद दोस्त!

— एंडी मर्सर

3

लिंटर त्रुटियों से बचने के लिए, मैं इसे इस तरह उपयोग करता हूं:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

— ट्यूडर मोरार
स्रोत

3

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

'' का उपयोग करके एक स्ट्रिंग का मान सेट करता है और रिएक्ट में यह जानने का कोई तरीका नहीं है कि यह एक HTML तत्व है। आप यह जानने के लिए निम्न कार्य कर सकते हैं कि यह एक HTML तत्व है -

निकालें ''और यह काम करेगा
<Fragment>HTML तत्व वापस करने के लिए उपयोग करें ।

— अमनदीप सिंह घई
स्रोत

2

इस सवाल का जवाब नहीं है। की सामग्री thisIsMyCopyस्वयं JSX है, HTML का एक स्ट्रिंग नहीं है। तो आप सचमुच JSX को JSX में चिपका रहे हैं।

— Antares42

आप प्रचार में टुकड़े भी पा सकते हैं, लेकिन केवल संस्करण X और पर।

— Nasia Makrygianni

-3

अगर किसी और के यहाँ अभी भी भूमि। ES6 के साथ आप अपना HTML वैरिएबल बना सकते हैं:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

— सताना
स्रोत

2

और यदि आप अपनी स्ट्रिंग के अंदर चर चाहते हैं, तो आपको प्रत्येक {}और पूरे स्ट्रिंग को कुछ मार्कअप में ({telephoneNumber} {email})

— लपेटना होगा

2

यह सवाल में पूछे गए सवाल से अलग है। प्रश्न copy copy copy strong copyमें एक स्ट्रिंग है। आपके पास यह JSX के रूप में है।

— YPCrumble

4

वह ES6 नहीं है, लेकिन

— JSX

-3

आप इस HTML को ReactDOM में इस तरह शामिल कर सकते हैं:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

यहाँ दो लिंक हैं लिंक और link2 प्रलेखन उस स्थिति में उपयोगी हो सकता है प्रतिक्रिया से।

— घास स्थल
स्रोत