প্রতিক্রিয়াশীল ভেরিয়েবল স্টেটমেন্ট (জেএসএক্স) সহ এইচটিএমএল প্রবেশ করুন

203

আমি জেএসএক্সে প্রতিক্রিয়াশীল ভেরিয়েবলগুলির সাথে এইচটিএমএল সন্নিবেশ করা দরকার যেখানে প্রতিক্রিয়া সহ এমন কিছু তৈরি করছি। এর মতো ভেরিয়েবল রাখার উপায় আছে কি:

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

এবং এটির মতো প্রতিক্রিয়া inোকানোর জন্য এবং এটি কাজ করে?

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

এবং এটি কি প্রত্যাশিত হিসাবে এইচটিএমএল ?োকানো আছে? আমি কোনও প্রতিক্রিয়া ফাংশন যা এই ইনলাইনটি করতে পারে বা এমন কিছু পার্স করার একটি পদ্ধতি যা এটি কাজ করতে দেয় সে সম্পর্কে আমি কিছু দেখিনি বা শুনিনি।

— কাইল হটচিস
সূত্র

294

আপনি বিপজ্জনকভাবে সেটআইনার এইচটিএমএল ব্যবহার করতে পারেন , যেমন

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

— ডগলাস
সূত্র

2

আপনার যদি কিছু যুক্ত করার দরকার হয় তবে এটি কীভাবে কাজ করবে <head>?

— ড্যানিয়েল মেডলে

উপাদান ডিডমাউন্টে সাধারণ ডোম পদ্ধতিগুলি ব্যবহার করা উচিত, যদিও আমি এটি আগে করি নি।

— ডগলাস

@ ড্যানিয়েলেমেডেলি আপনি কি শর্তসাপেক্ষে আইআই মন্তব্যগুলি <হেড> এর মধ্যে sertোকানোর চেষ্টা করছেন? যদি তা হয় তবে এখানে বর্ণিত কৌশলটি ব্যবহার করে আমার সাফল্য পেয়েছে

— ক্যাম জ্যাকসন

3

নিশ্চিত করুন যে আপনি কোনও পদ্ধতি বিপজ্জনকভাবে সেটইনার এইচটিএমএল-এ পাস করেছেন এবং হ্যাশ নয়। ডক্স অনুসারে, কেবল একটি হ্যাশ পাস করা বিপজ্জনক। রেফারেন্স: ফেসবুক.

— github.io/react/tips/dan आरঙ্কে-set

1

ডিভ withoutোকানো ছাড়া উপায় আছে?

— শহরবাসী

101

নোট করুন যে dangerouslySetInnerHTMLআপনি ইনজেকশন দিচ্ছেন এমন HTML স্ট্রিংয়ে কী রয়েছে তা আপনি যদি না জানেন তবে তা বিপজ্জনক হতে পারে। এর কারণ হ'ল দূষিত ক্লায়েন্টের সাইড কোডটি স্ক্রিপ্ট ট্যাগের মাধ্যমে ইনজেকশন দেওয়া যেতে পারে।

এইচটিএমএল স্ট্রিংটি DOMPurify এর মতো কোনও ইউটিলিটির মাধ্যমে স্যানিটাইজ করা ভাল ধারণা আপনি যদি এইচটিএমএলটি যে 10,000 টি রেন্ডার করছেন তা XSS (ক্রস-সাইট স্ক্রিপ্টিং) নিরাপদ নয়।

উদাহরণ:

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>
    );
}

— ইও ওয়াকিটা
সূত্র

@ ভাইস্যাঙ্ক এর কোনও দরকার নেই :)

— আর্টেম বার্নাটস্কিই

1

কেবলমাত্র এইচটিএমএল ট্যাগই নয়, লাইব্রেরি থেকে উপাদান ইউআই সতর্কতা ট্যাগ হিসাবে রেন্ডার করা কি সম্ভব? আমি কোডটি এর মতো হতে চাই

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>     ); }

— শাশা রোমানভ

@ সাশারমানভ, এই দৃশ্যের জন্য আপনি কি কোনও সমাধান পেয়েছেন?

— নিমিশ গোয়েল

51

বিপজ্জনকভাবে সেটইনার এইচটিএমএলটির অনেক অসুবিধা রয়েছে কারণ এটি ট্যাগের মধ্যে সেট করা আছে।

আমি আপনাকে এই উদ্দেশ্যে এনপিএম-তে একটি সন্ধান পেয়েছি এমন কিছু প্রতিক্রিয়া র‌্যাপার ব্যবহার করার পরামর্শ দিচ্ছি। এইচটিএমএল-প্রতিক্রিয়া-পার্সার একই কাজ করে।

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

"বিপজ্জনকভাবে সেটইনার এইচটিএমএলটির অনেক অসুবিধা রয়েছে কারণ এটি ট্যাগের ভিতরে সেট করে।" আপনি এই সম্পর্কে আরও ব্যাখ্যা করতে পারেন। এইচটিএমএল-রিএ্যাক্ট-পার্সার এবং স্যানিটাইজড ইনারএইচটিএমএল এর মধ্যে কী মৌলিক পার্থক্য রয়েছে তা ভেবে দেখার চেষ্টা করা হচ্ছে

— ছত্রি

দেখে মনে হচ্ছে এইচটিএমএল-প্রতিক্রিয়া-পার্সার ইনপুটটি স্যানিটাইজ করে না - এফএকিউ দেখুন

— লিটল ব্রেন

28

ব্যবহার করে ''আপনি এটি স্ট্রিং তৈরি করছেন। ইনভার্টেড কমা ছাড়া ব্যবহার করুন এটি দুর্দান্ত কাজ করবে।

— iamnotbatma
সূত্র

14

প্রথমে আমি হেসেছিলাম এবং তারপরে এটিকে একটি সুযোগ দিয়েছিলাম যা আমার মনকে

— এম

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 উপাদান a প্রতিক্রিয়াটি এটি একটি এইচটিএমএল উপাদান বলে জানানোর জন্য আপনি নিম্নলিখিতটি করতে পারেন -

সরান ''এবং এটি কাজ করবে
<Fragment>এইচটিএমএল উপাদান ফেরত দিতে ব্যবহার করুন ।

— অমনদীপ সিং ঘাই
সূত্র

2

এটি প্রশ্নের উত্তর দেয় না। এর বিষয়বস্তু thisIsMyCopyনিজেই জেএসএক্স, HTML এর স্ট্রিং নয়। সুতরাং আপনি আক্ষরিক জেএসএক্সকে জেএসএক্সে আটকান।

— এন্টারেস 42

আপনি প্র্যাক্টে খুব টুকরো খুঁজে পেতে পারেন তবে কেবল এক্স এবং আরও সংস্করণে।

— নাসিয়া ম্যাক্রিজিয়ান্নি

-3

অন্য কেউ যদি এখনও এখানে অবতরণ করে। ES6 এর মাধ্যমে আপনি আপনার এইচটিএমএল ভেরিয়েবলটি তৈরি করতে পারেন:

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একটি স্ট্রিং। আপনার এটি জেএসএক্স হিসাবে রয়েছে।

— YPCrumble

4

এটি ES6 নয়, তবে জেএসএক্স

— gztomas

-3

আপনি এই জাতীয় এইচটিএমএলটিকে এই জাতীয় রিঅ্যাক্টডোমে অন্তর্ভুক্ত করতে পারেন:

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

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

প্রতিক্রিয়া ডকুমেন্টেশন থেকে এখানে দুটি লিঙ্ক লিঙ্ক এবং লিঙ্ক 2 রয়েছে যা সহায়ক হতে পারে।

— কেদার
সূত্র