ফেসবুকের রিঅ্যাক্টজেএস নিয়ে কাজ করতে আমার সমস্যা হচ্ছে। আমি যখনই অজ্যাক্স করি এবং এইচটিএমএল ডেটা প্রদর্শন করতে চাই, রিএ্যাকটিজেএস এটি পাঠ্য হিসাবে প্রদর্শিত হয়। (নীচের চিত্র দেখুন)
তথ্য jquery Ajax এর সাফল্য কলব্যাক ফাংশন মাধ্যমে প্রদর্শিত হয়।
$.ajax({
url: url here,
dataType: "json",
success: function(data) {
this.setState({
action: data.action
})
}.bind(this)
});
এটি এইচটিএমএল রূপান্তর করার কোন সহজ উপায় আছে? আমি কীভাবে এটি ব্যবহার করব?
উত্তর:
ডিফল্টরূপে, এক্সএএসএস (ক্রস-সাইট স্ক্রিপ্টিং) প্রতিরোধ করতে প্রতিক্রিয়া HTML থেকে পালিয়ে যায় । আপনি যদি সত্যিই এইচটিএমএল রেন্ডার করতে চান তবে আপনি dangerouslySetInnerHTMLসম্পত্তিটি ব্যবহার করতে পারেন :
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />প্রতিক্রিয়া এই ইচ্ছাকৃতভাবে-জটিল সিনট্যাক্সকে বাধ্য করে যাতে আপনি দুর্ঘটনাক্রমে এইচটিএমএল হিসাবে পাঠ্য রেন্ডার করতে এবং এক্সএসএস বাগগুলি প্রবর্তন করেন না।
sanitizeথেকে ফাংশনটি ব্যবহার করে সামগ্রীটি স্যানিটাইজ করা নিরাপদভাবে বাজানো উপযুক্ত dompurify।
এটি সম্পাদন করার জন্য এখন আরও নিরাপদ পদ্ধতি রয়েছে। ডক্স আপডেট করা হয়েছে এই পদ্ধতি সঙ্গে।
অন্যান্য পদ্ধতি
সবচেয়ে সহজ - ইউনিকোড ব্যবহার করুন, ফাইলটিকে ইউটিএফ -8 হিসাবে সংরক্ষণ করুন এবং ইউটিএফ -8 এ সেট করুন charset।
<div>{'First · Second'}</div>
নিরাপদ - জাভাস্ক্রিপ্ট স্ট্রিংয়ের অভ্যন্তরের সত্তার জন্য ইউনিকোড নম্বরটি ব্যবহার করুন।
<div>{'First \u00b7 Second'}</div>
অথবা
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
অথবা স্ট্রিং এবং জেএসএক্স উপাদানগুলির সাথে একটি মিশ্র অ্যারে।
<div>{['First ', <span>·</span>, ' Second']}</div>
শেষ অবলম্বন - কাঁচা এইচটিএমএল ব্যবহার করে sertোকান dangerouslySetInnerHTML।
<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
আমি ব্যবহার সুপারিশ বিজড়িত দ্বারা নির্মিত milesj । এটি একটি অসাধারণ লাইব্রেরি যা কোনও সংখ্যার ব্যবহার করে যদি ডিওএমে এইচটিএমএলকে বিশ্লেষণ এবং নিরাপদে প্রবেশের জন্য উদ্ভাবনী কৌশলগুলি ব্যবহার করে।
ইন্টারভিউ হ'ল এইচটিএমএল, ফিল্টার বৈশিষ্ট্যগুলি, ম্যাচারদের সাথে টেক্সটকে অটোরেপ করা, ইমোজি চরিত্রগুলি রেন্ডার এবং আরও অনেকগুলি নিরাপদে রেন্ডার করার জন্য একটি প্রতিক্রিয়া পাঠাগার।
ব্যবহারের উদাহরণ:
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 interweavenpm i html-react-parser;
import Parser from 'html-react-parser';
<td>{Parser(this.state.archyves)}</td>আমি এই জেএস ফিডল পেয়েছি। এটি এই মত কাজ করে
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;আইডিকে গুডলাক করেন তবে এটি হতে পারে
আপনি প্রতিক্রিয়াতে কাঁচা এইচটিএমএল রেন্ডার করতে চাইলে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন
<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />উদাহরণ - রেন্ডার
পরীক্ষা একটি ভাল দিন