Reactjs html string को jsx में कन्वर्ट करते हैं

212

मुझे facebook के ReactJS से निपटने में परेशानी हो रही है। जब भी मैं ajax करता हूं और html डेटा प्रदर्शित करना चाहता हूं, तो ReactJS इसे टेक्स्ट के रूप में प्रदर्शित करता है। (नीचे आंकड़ा देखें)

ReactJS स्ट्रिंग प्रदान करता है

डेटा को अजाक्स की सफलता कॉलबैक फ़ंक्शन के माध्यम से प्रदर्शित किया जाता है।

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

यहां छवि विवरण दर्ज करें

क्या इसे html में बदलने का कोई आसान तरीका है? मैं इसे ReactJS का उपयोग कैसे करना चाहिए?

— पीटर वेटबर
स्रोत

406

डिफ़ॉल्ट रूप से, रिएक्ट एक्सएसएस (क्रॉस-साइट स्क्रिप्टिंग) को रोकने के लिए HTML से बच जाता है । यदि आप वास्तव में HTML को रेंडर करना चाहते हैं, तो आप dangerouslySetInnerHTMLसंपत्ति का उपयोग कर सकते हैं:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

प्रतिक्रिया इस जानबूझकर बोझिल वाक्यविन्यास को मजबूर करती है ताकि आप गलती से टेक्स्ट को HTML के रूप में प्रस्तुत न करें और XSS बग का परिचय दें।

— सोफी अल्परट
स्रोत

4

यह सिंटैक्स मुखपृष्ठ पर और ट्यूटोरियल में दिखाया गया है, लेकिन मुझे सिर्फ यह महसूस हुआ कि इसे कहीं और प्रलेखित नहीं किया गया है इसलिए मैंने इसे ठीक करने के लिए # 413 दायर किया ।

— सोफी अल्परट

सही बात! मैं इसे पहले से ही खतरनाक तरीके से उपयोग कर हल कर चुका

— हूं SetInnerHTML

यदि आप बाहरी API से वह जानकारी प्राप्त कर रहे हैं तो sanitizeयह dompurifynpm पैकेज से फ़ंक्शन का उपयोग करके सामग्री को सुरक्षित करने के लिए सुरक्षित है ।

— बैरी माइकल डॉयल

77

इसे पूरा करने के लिए अब सुरक्षित तरीके हैं। डॉक्स अपडेट किए गए हैं इन तरीकों के साथ।

अन्य तरीके

सबसे आसान - यूनिकोड का उपयोग करें, फ़ाइल को UTF-8 के रूप में सहेजें और UTF-8 पर सेट करें charset।

<div>{'First · Second'}</div>
सुरक्षित - एक जावास्क्रिप्ट स्ट्रिंग के अंदर इकाई के लिए यूनिकोड संख्या का उपयोग करें।

<div>{'First \u00b7 Second'}</div>

या

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
या तार और JSX तत्वों के साथ मिश्रित सरणी।

<div>{['First ', <span>·</span>, ' Second']}</div>
अंतिम रिज़ॉर्ट - का उपयोग करके कच्चे HTML डालें dangerouslySetInnerHTML।

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

— ब्रेट DeWoody
स्रोत

15

मैंने प्रलेखन तैयार कर लिया है, लेकिन WYSIWYG संपादक से एक जैसे लंबे HTML स्ट्रिंग के बारे में? मैं नहीं देख सकते हैं कि कैसे हम 1st, 2nd या 3 विधि का उपयोग कर सकते हैं

— ericn

4

मैं @ से सहमत हूं। पहले से बची हुई सामग्री को कहीं संग्रहीत करने के लिए 1-3 क्या तरीके अच्छे हैं, जैसे डीबी? यह भी ध्यान दें कि विधि 4 - एकमात्र तरीका - इसका मतलब है कि आप बच्चे को नोड नहीं जोड़ सकते।

— डीवीडीप्लम

14

हाँ। हार्ड-कोडेड "गतिशील" सामग्री के साथ ये उदाहरण बहुत मायने नहीं रखते हैं।

— नियमित

यह मेरा भीतर का HTML है - "कुल मिलाकर \ u003cb \ u003e1 \ u0026nbsp; - \ u0026nbsp; 10 \ u003c / b \ u003e of \ u003bb \ u003e13 \ u003c / b \ u003e प्रदर्शित हो रहा है", जबकि यह वही है जो मुझे बताया जा रहा है। प्रवेश <b> 1 & nbsp; - & nbsp; 10 </ b> <b> 13 </ b> कुल में "। जब मैं खतरनाक तरीके से उपयोग करने की कोशिश करता हूं, तो HTML, evrything टूट जाता है।

— विपिन v१६

36

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

Interweave HTML, फ़िल्टर विशेषताओं, मिलानकर्ताओं के साथ ऑट्रैप टेक्स्ट, इमोजी वर्णों को सुरक्षित रूप से प्रस्तुत करने और बहुत कुछ करने के लिए एक प्रतिक्रिया पुस्तकालय है।

Interweave एक मजबूत प्रतिक्रिया पुस्तकालय है जो कर सकता है:
- खतरनाक तरीके से HTML का उपयोग किए बिना HTML को सुरक्षित रूप से रेंडर करें।
- सुरक्षित रूप से पट्टी HTML टैग्स।
- स्वचालित XSS और इंजेक्शन सुरक्षा।
- फ़िल्टर का उपयोग करके HTML विशेषताएँ साफ़ करें।
- मैचर्स का उपयोग कर घटकों को इंटरपोल करें।
- ऑटोलिंक यूआरएल, आईपी, ईमेल और हैशटैग।
- रेंडर इमोजी और इमोटिकॉन अक्षर।
- और भी बहुत कुछ!

उपयोग उदाहरण:

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave

— अरमान Nisch
स्रोत

क्या आप एक उपयोग उदाहरण प्रदान कर सकते हैं?

— एल एनोनिमो

1

@ElAnonimo मैंने एक उपयोग उदाहरण जोड़ा है। आशा है कि चीजों को थोड़ा और स्पष्ट करता है।

— अरमान निश्च

1

एक लाख धन्यवाद, इंटरव्यू बिल्कुल वही है जो मुझे चाहिए था। चीयर्स।

— निकोलस हैमिल्टन

1

इसके लिए प्रलेखन मददगार नहीं है। इसके अलावा, मैंने html की कुछ पंक्तियों के साथ प्रयास किया और मेरे पास त्रुटि संदेशों से भरा एक पृष्ठ था। क्या किसी के पास दस्तावेज के साथ उदाहरण या कोई संसाधन हैं?

— तरुण कोला

8

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

— डोनाटस कुस्किस
स्रोत

6

मुझे यह js फ़ेडल मिला। यह इस तरह काम करता है

function unescapeHTML(html) {
    var escapeEl = document.createElement('textarea');
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
}

<textarea className="form-control redactor"
                          rows="5" cols="9"
                          defaultValue={unescapeHTML(this.props.destination.description)}
                          name='description'></textarea>

jsfiddle लिंक

— हसन गिलक
स्रोत

दुर्भाग्य से दस्तावेज़ सर्वर रेंडरिंग पर काम नहीं करता है।

— लॉरेंट वैन विंकेल

अगर आप

import JSDOM from 'jsdom';   global.window = new JSDOM('', { url: 'http://localhost' });  global.document = global.window.document;

आइडल गुडलक करते हैं तो हो सकता है

— कॉटी एम्ब्री

2

आप html-react-parser से Parser () का भी उपयोग कर सकते हैं। मैंने उसी का इस्तेमाल किया है। लिंक साझा किया गया।

— आभ्रा डे
स्रोत

2

मैं प्रतिक्रिया-html- पार्सर नामक npm पैकेज का उपयोग शुरू करता हूं

— Dayan
स्रोत

1

अभी भी प्रयोग करने वालों के लिए, npm प्रतिक्रिया-html-parser स्थापित करें

जब मैंने इसे स्थापित किया तो इसमें 123628 साप्ताहिक डाउनलोड थे।

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

— letele
स्रोत

0

यदि आप React में कच्चे HTML रेंडर करना चाहते हैं तो आप निम्नलिखित का उपयोग कर सकते हैं

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

उदाहरण - रेंडर

टेस्ट एक अच्छा दिन है

— पानायियोटिस जॉर्जियोउ
स्रोत