প্রতিক্রিয়া উপাদানটিতে এইচটিএমএল স্ট্রিংকে আসল এইচটিএমএল হিসাবে রেন্ডার করুন

Question

এখানে আমি কী চেষ্টা করেছি এবং কীভাবে ভুল হয় Here

এইটা কাজ করে:

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

এটি করে না:

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

---

বর্ণনা বৈশিষ্ট্যটি এইচটিএমএল সামগ্রীর সাধারণ স্ট্রিং। তবে এটি কোনও স্ট্রিং হিসাবে রেন্ডার করা হয়েছে, কোনও কারণে HTML হিসাবে নয়।

কোনও পরামর্শ?

Answer 1

আপনি যে পাঠ্যটি নোডে সংযোজন করার চেষ্টা করছেন তা এইভাবে পালিয়েছে কিনা তা পরীক্ষা করুন:

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

এর পরিবর্তে:

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

যদি পালানো হয় তবে আপনার এটিকে আপনার সার্ভার-পাশ থেকে রূপান্তর করা উচিত।

নোডটি টেক্সট কারণ পালিয়ে গেছে

নোড একটি ডোম নোড কারণ এড়ানো যায় নি

Comments

এই বিষয়টি ছিল। বর্ণনা স্ট্রিং এইচটিএমএল এড়িয়ে গেছে। আমি এটিকে ছাড়াই এবং এখন এটি দুর্দান্ত কাজ করে।

— সেরজিও তাপিয়া

প্রতিক্রিয়া v16 থেকে dangerouslySetInnerHTMLপরিবর্তে ব্যবহার এড়াতে দয়া করে Fragment। পরীক্ষা করে দেখুন পরবর্তী উত্তর @ ব্র্যাড-অ্যাডামস দ্বারা

— কুনাল পারেখ

@ কুণালপরেখ উল্লেখটি প্রশংসা করুন, তবে তারা বিভিন্ন জিনিস। আমার উত্তরটি কেবলমাত্র বৈধ যদি এইচটিএমএল আপনার অ্যাপ্লিকেশনের মধ্যে অবস্থিত (যার অর্থ এটি আসলে জেএসএক্স)। বহিরাগত উত্স থেকে জেএসএক্সে এইচটিএমএল বিশ্লেষণ করার জন্য আপনাকে অন্য একটি সমাধান খুঁজতে হবে।

— ব্র্যাড অ্যাডামস

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

Comments

this.props.match.descriptionএকটি স্ট্রিং, কোনও বস্তু নয়। ভুল মার্কআপ বলতে কী বোঝ? আপনি কি আবদ্ধ ট্যাগ বলতে চাইছেন? প্রতিক্রিয়া শুধু এটি রেন্ডার করা উচিত?

— সেরজিও তাপিয়া

আপনি কি এখানে কনসোল.লগ আটকে দিতে পারবেন (এটি.পড়গুলি.ম্যাচ.ডেস্ক্রিপশন);

— ইলানাস

একটি উদাহরণ:<p><strong>Our Opportunity:</strong></p>

— সেরজিও তাপিয়া

এই ক্ষেত্রে আপনাকে .innerHTML ব্যবহার করতে হবে বা HTMLEntities ডিকোড করতে হবে।

— Ilanus

ট্যাগ সহ একাধিক লাইন বা এইচটিএমএল কোডটি ফিরুন: ফাংশন htmlDecode (ইনপুট) e var e = document.createElement ('div'); e.innerHTML = ইনপুট; var returnString = ''; (সূচক = 0; সূচক <e.childNodes.length; সূচক ++) {// কেবল একটি স্ট্রিংয়ের ক্ষেত্রে যদি (e.childNodes [সূচী]। নোডভ্যালু) {রিটারিং স্ট্রিং + = e.childNodes [সূচী]। নোডভ্যালু; e // এইচটিএমএল এর ক্ষেত্রে যদি (e.childNodes [সূচী]। আউটার এইচটিএমএল) {রিটারিং স্ট্রিং + = ই.চাইল্ড নোডস [সূচক]। আউটআর এইচটিএমএল; }} রিটার্ন স্ট্রিং; }

— ক্রিস অ্যাডামস

Answer 3

আমি 'রিএ্যাক্ট-এইচটিএমএল-পার্সার' ব্যবহার করি

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

এনপিএমজেএস.কম-এ উত্স

আরও দৃশ্যমানতার জন্য @ ওকরামের মন্তব্য তুলে নেওয়া:

এর গিথুব বিবরণ থেকে: এইচটিএমএল স্ট্রিংগুলি এনপিএমজেএস.কম থেকে বিপজ্জনকভাবে সেটইনার এইচটিএমএল ব্যবহারের প্রয়োজনীয়তা এড়িয়ে সরাসরি প্রতিক্রিয়ার উপাদানগুলিতে রূপান্তরিত করে এইচটিএমএল স্ট্রিংগুলিকে রিঅ্যাক্ট উপাদানগুলিতে রূপান্তর করার জন্য একটি ইউটিলিটি। বিপজ্জনকভাবে সেটআইএনএইচটিএমএল ব্যবহার এড়ানো এবং স্ট্যান্ডার্ড এইচটিএমএল উপাদান, বৈশিষ্ট্য এবং ইনলাইন শৈলীগুলিকে তাদের প্রতিক্রিয়া সমতলে রূপান্তর করে ts

Comments

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

— ওমর

এর Converts HTML strings directly into React components avoiding the need to use dangerouslySetInnerHTMLগিথুব বিবরণ থেকে : এনএমপিজেএস ডটকম থেকেA utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.

— ওক্রাম

Answer 4

এইচটিএমএলযুক্ত স্ট্রিংটি কোথা থেকে আসছে (যেখানে আপনার অ্যাপের কোথাও) আপনার যদি নিয়ন্ত্রণ থাকে তবে আপনি নতুন <Fragment>এপিআই থেকে উপকার পেতে পারেন , এর মতো কিছু করে:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

Comments

আপনার উদাহরণে এইচটিএমএল যুক্ত কোনও স্ট্রিং নেই। এটি হয় জেএসএক্স বা প্লেইন স্ট্রিং।

— mrkvon

ঠিক আছে, হ্যাঁ প্রযুক্তিগতভাবে আপনি @ মি্রকভনকে সঠিক বলেছেন, তবে আমি যেমন উল্লেখ করেছি, এই সমাধানটি কেবল তখনই বৈধ যখন "এইচটিএমএল" / জেএসএক্স এমন কিছু যা আপনার নিয়ন্ত্রণে থাকে। উদাহরণস্বরূপ, কোনও API এর মাধ্যমে সরবরাহ করা কিছু কাঁচা এইচটিএমএল রেন্ডারিংয়ের জন্য নয় । Fragmentএপিআইয়ের আগে এটি আমার জন্য সর্বদা বেদনা ছিল, এতে অতিরিক্ত spanমোড়কের প্রয়োজন ছিল যা কখনও কখনও ফ্লেক্স লেআউটগুলির সাথে ঝামেলা করে। আমি যখন এই প্রশ্নের সম্ভাব্য সমাধানের সন্ধানে হোঁচট খেয়েছি তখন আমি ভেবেছিলাম যে আমি কীভাবে জিনিসগুলি পেয়েছি তা ভাগ করে নিই ।

— ব্র্যাড অ্যাডামস 21

ধন্যবাদ! আমার ক্ষেত্রে এটিই একমাত্র সমাধান যা কাজ করেছিল। এছাড়াও, এই উত্তরে এমআরকভনের মন্তব্যের জবাব দেওয়া: এই উত্তরে প্রকৃতপক্ষে এইচটিএমএল Some text <strong>wrapped with strong</strong>রয়েছে যা এইচটিএমএল ট্যাগ ধারণ করে strong।

— বিনিতা ভারতী

@ বিনিতাভারতী তবে এটি কোনও স্ট্রিং নয়। আপনি যদি "<p> এটি একটি স্ট্রিং </ p>" (বা কেবল কোনও ভেরিয়েবলের মধ্যে একটি স্ট্রিং সঞ্চয় করে) এর মতো কোনও এপিআই থেকে স্ট্রিং পান, যখন আপনি <ফ্রেম>> এ স্ট্রিংটি রাখেন, আউটপুটটিতে এখনও < p> ট্যাগ।

— মুচডেকাল

@BradAdams। ভাল কৌশল যদিও। এটি সহজ হয়ে যায় এমন দৃষ্টান্তগুলি আমি দেখতে পাচ্ছি।

— মুচডেকাল

Answer 5

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

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

অথবা আপনি এই সহজ উপায়ে আরও বাস্তবায়ন করতে পারেন: প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে এইচটিএমএল কাঁচা রেন্ডার করুন

Answer 6

dangerouslySetInnerHTML

বিপজ্জনকভাবে সেটআইনার এইচটিএমএল ব্রাউজার ডিওএম-র অভ্যন্তরীণ এইচটিএমএল ব্যবহারের জন্য প্রতিক্রিয়ার প্রতিস্থাপন। সাধারণভাবে, কোড থেকে এইচটিএমএল নির্ধারণ করা ঝুঁকিপূর্ণ কারণ অজান্তেই আপনার ব্যবহারকারীদের ক্রস-সাইট স্ক্রিপ্টিং (এক্সএসএস) আক্রমণে প্রকাশ করা সহজ। সুতরাং, আপনি সরাসরি প্রতিক্রিয়া থেকে এইচটিএমএল সেট করতে পারেন তবে বিপজ্জনকভাবে নিজেকে স্মরণ করিয়ে দেওয়ার জন্য আপনাকে বিপজ্জনকভাবে সেটআইটনারএইচটিএমএল টাইপ করতে হবে এবং একটি __html কী দিয়ে একটি বস্তুটি পাস করতে হবে। উদাহরণ স্বরূপ:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Answer 7

স্প্যান করার জন্য আমি অভ্যন্তরীণ এইচটিএমএল একসাথে ব্যবহার করি:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Comments

আমি এটি পছন্দ করি, যখন আপনার কাছে বিলাসিতা না থাকে তখন অতিরিক্ত লাইব্রেরি বা সার্ভার-সাইডের উপর নির্ভরতার প্রয়োজন হয় না। আপনি দ্বারা অনুপ্রাণিত, কিন্তু একটি বর্গ উপাদান আমি componentDidMount() { this.message.current.innerHTML = this.state.selectedMessage.body; }শরীরের জন্য আমার জন্য পলায়ন html হয়।

— ওয়েবহাউন্ড

Answer 8

আমার ক্ষেত্রে, আমি প্রতিক্রিয়া-রেন্ডার-এইচটিএমএল ব্যবহার করেছি

প্রথমে প্যাকেজটি ইনস্টল করুন npm i --save react-render-html

তারপর,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Answer 9

আমি পেতে না পারে npm buildসঙ্গে কাজ করার react-html-parser। তবে, আমার ক্ষেত্রে, আমি সফলভাবে https://reactjs.org/docs/frations.html ব্যবহার করতে সক্ষম হয়েছি । আমার কয়েকটি এইচটিএমএল ইউনিকোড অক্ষর প্রদর্শন করার প্রয়োজন ছিল তবে সেগুলি সরাসরি জেএসএক্সে এম্বেড করা উচিত নয়। জেএসএক্সের মধ্যে, এটি উপাদানগুলির রাজ্য থেকে বাছাই করতে হয়েছিল। কম্পোনেন্ট কোড স্নিপেট নীচে দেওয়া হয়েছে:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

Answer 10

আমি https://www.npmjs.com/package/html-to-react ব্যবহার করি

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Answer 11

যদি আপনার control this.props.match.description control নিয়ন্ত্রণ থাকে এবং আপনি যদি জেএসএক্স ব্যবহার করছেন। আমি "বিপজ্জনকভাবে সেটআইনার এইচটিএমএল" ব্যবহার না করার পরামর্শ দেব।

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);