রিঅ্যাক্টজ সহ কাঁচা এইচটিএমএল রেন্ডারিং

154

তাহলে কি এই একমাত্র উপায় কি রিচেক্টজ সহ কাঁচা এইচটিএমএল রেন্ডার করার?

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

আমি জানি যে জেএসএক্সের সাথে জিনিসপত্রকে চিহ্নিত করার কয়েকটি দুর্দান্ত উপায় রয়েছে তবে আমি মূলত কাঁচা এইচটিএমএল (সমস্ত শ্রেণি, ইনলাইন শৈলী ইত্যাদি) সরবরাহ করতে সক্ষম হতে আগ্রহী। এরকম কিছু জটিল:

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

আমি জেএসএক্সের সমস্তটি আবার লিখতে চাই না।

আমি এই সব ভুল সম্পর্কে চিন্তা করছি। আমাকে সংশোধন করুন

javascript reactjs

— vinhboy
সূত্র

1

এটি প্রায় জেএসএক্স। আপনি যদি কাঁচা এইচটিএমএল হিসাবে প্রচুর মার্কআপ রেন্ডার করেন তবে আপনি রিএ্যাক্টের মতো লাইব্রেরি ব্যবহারের সুবিধা হারাচ্ছেন। আমি প্রতিক্রিয়াগুলিকে হ্যান্ডেল করতে দিতে ছোট পরিবর্তনগুলি ("ক্লাস" -> "শ্রেণীর নাম") করার সুপারিশ করব।

— রস অ্যালেন

2

এই নির্দিষ্ট উদাহরণের জন্য কেউ ইতিমধ্যে আপনার জন্য কাজটি সম্পন্ন করেছে , তবে এখনও প্রশ্নটি সাধারণ ক্ষেত্রে দাঁড়িয়েছে।

— র্যান্ডি মরিস

medium.com/@to_pe/...

— TechDog

43

আপনি html-to-reactএনপিএম মডিউলটি পেতে পারেন।

দ্রষ্টব্য: আমি মডিউলটির লেখক এবং এটি কয়েক ঘন্টা আগে প্রকাশ করেছে। কোনও বাগ বা ব্যবহারযোগ্যতার সমস্যাগুলি নির্দ্বিধায় জানাতে দয়া করে

— মাইক নিক্লেস
সূত্র

24

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

— যশ শর্মা

2

আমি সবেমাত্র কোডটি পরীক্ষা করেছি। দেখে মনে হচ্ছে এটি বিপজ্জনকভাবে সেটইনার এইচটিএমএল ব্যবহার করছে না।

— অজয় রাঘব

মাইক আপনি এখনও এই এনপিএম মডিউলটি সক্রিয়ভাবে রক্ষণ করছেন?

— ড্যানিয়েল

ওহে ড্যানিয়েল, আমি এবং কোনও অবদানকারী এটি গ্রহণ করে নি এবং সর্বশেষ প্রকাশটি last মাস আগে প্রকাশ করেছিলেন। Github.com/aknuds1/html-to-react

— মাইক নিকেলস

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

— টেসারাক্টার

185

এইচটিএমএল রেন্ডার করার জন্য এখন আরও নিরাপদ পদ্ধতি রয়েছে। আমি এখানে একটি পূর্ববর্তী উত্তরে এটি কভার । আপনার 4 টি বিকল্প রয়েছে, শেষ ব্যবহারগুলি dangerouslySetInnerHTML।

এইচটিএমএল রেন্ডার করার পদ্ধতি

সবচেয়ে সহজ - ইউনিকোড ব্যবহার করুন, ফাইলটিকে ইউটিএফ -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'}} />

— ব্রেট ডিউউডি
সূত্র

আমার যা প্রয়োজন কেবল তা 3 বা 4

— নিকোলাস এস এক্সু

dangerouslySetInnerHTML__html ছাড়াও অন্যান্য বৈশিষ্ট্যগুলি কী গ্রহণ করে তা ভাবছেন

— জুয়ান সোলানো

30

আমি এই থ্রেডটি পছন্দ করি ... সুস্পষ্টভাবে: "# 4 ব্যবহার না করার জন্য আপনি যা কিছু করতে পারেন তা করুন"। প্রত্যেকে: "# 4 দুর্দান্ত কাজ করেছে!"

— গভীরতরতর

1

টাইপস্ক্রিপ্ট পরিবেশে অটো সম্পূর্ণ প্রবেশ অনুসারে @ জুয়ানসোলানো কিছুই নয় none

— আন্দ্রে লিনার্ট

অনুরূপ একটি প্রশ্নে, stackoverflow.com/questions/19266197/… , এই উত্তরটি খুব ভাল করেনি। সম্ভবত এই প্রশ্নের জন্য এটি আরও ভাল ফিট হতে পারে বা লোকেরা উত্তরটি পড়ছে না ...: ডি

— 425

27

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

// react render method:

render() {
    return (
      <div>
        { this.props.textOrHtml.indexOf('</') !== -1
            ? (
                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
                </div>
              )
            : this.props.textOrHtml
          }

      </div>
      )
  }

— Cory রবিনসন
সূত্র

7

এটি নিরাপদ নয় - এইচটিএমএল থাকলে কী হবে <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">?

— yjwong

11

আপনি যদি HTML এর

— জন

18

আমি এই খাঁটি উপাদানটি চেষ্টা করেছি:

const RawHTML = ({children, className = ""}) => 
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

বৈশিষ্ট্য

লাগে classNameপ্রপ (এটি স্টাইল করা সহজ)
প্রতিস্থাপন \nকরতে<br /> (আপনি প্রায়ই যে কাজ করতে চান)
যেমন প্লেস বিষয়বস্তু শিশুদের যখন মত উপাদান ব্যবহার করছে:
<RawHTML>{myHTML}</RawHTML>

আমি গিথুব: র এইচটিএমএল: এইচটিএমএল রেন্ডার করার জন্য রিঅ্যাক্টজেএস খাঁটি উপাদানটি উপাদানটি রেখেছি

— Netsi1964
সূত্র

12

export class ModalBody extends Component{
    rawMarkup(){
        var rawMarkup = this.props.content
        return { __html: rawMarkup };
    }
    render(){
        return(
                <div className="modal-body">
                     <span dangerouslySetInnerHTML={this.rawMarkup()} />

                </div>
            )
    }
}

— Jozcar
সূত্র

উপরের কাজটি আমার জন্য, আমি এইচডিএমএল মডেল বডিতে যাচ্ছিলাম।

— জোজকার

11

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

এটা তোলে মাধ্যমে DOM মধ্যে এটি ইনজেকশনের আগে আপনার কাঁচা এইচটিএমএল নির্বিষ করার (যেমন, DOMPurify ব্যবহার করে) ভাল / নিরাপদ dangerouslySetInnerHTML।

DOMPurify - এইচটিএমএল, ম্যাথএমএল এবং এসভিজির জন্য একটি ডোম-কেবলমাত্র, সুপার-ফাস্ট, উবার-সহনশীল এক্সএসএস স্যানিটাইজার। ডোমপুরিফাই একটি সুরক্ষিত ডিফল্ট নিয়ে কাজ করে তবে প্রচুর কনফিগারেশন এবং হুক সরবরাহ করে।

উদাহরণ :

import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)

const rawHTML = `
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
`

const YourComponent = () => (
  <div>
    { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
  </div>
)

export default YourComponent

— Yuci
সূত্র

এই উত্তরটিতে আমি ঠিক এটিই খুঁজছিলাম। এটির আরও বেশি অগ্রগতি হওয়া উচিত

— llamerr

6

আমি পার্সার নামে এই গ্রন্থাগারটি ব্যবহার করেছি । এটি আমার প্রয়োজনের জন্য কাজ করেছিল।

import React, { Component } from 'react';    
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};

— ecairol
সূত্র

3

21 কেবি (8 কেবি গিজিপযুক্ত)। ব্রাউজার কোডের জন্য আমি এটি প্রমাণ করতে পারি না।

— পিটার বেনগসসন

এই গ্রন্থাগারটি আমার এক্সপো অ্যাপ্লিকেশনটি ভেঙে দেয়

— এক্কিস

5

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

আপনার ক্ষেত্রে, বৈধ জেএসএক্স সিনট্যাক্সে রূপান্তর করা বেশ সোজা is শুধু classবৈশিষ্ট্য পরিবর্তন className। অথবা, উপরের মন্তব্যে উল্লিখিত হিসাবে, আপনি রিঅ্যাকট বুটস্ট্র্যাপ লাইব্রেরি ব্যবহার করতে পারেন যা বুটস্ট্র্যাপ উপাদানগুলিকে প্রতিক্রিয়া উপাদানগুলিতে আবদ্ধ করে।

— ব্রেনো ফেরেরিরা
সূত্র

8

আপনার উত্তরের জন্য ধন্যবাদ. আমি অভ্যন্তরীণ এইচটিএমএল ব্যবহারের সুরক্ষা সম্পর্কিত প্রভাবগুলি বুঝতে পারি এবং আমি জানি আমি এটি জেএসএক্সে রূপান্তর করতে পারি। তবে আমি কাঁচা এইচটিএমএল স্নিপেটগুলি ব্যবহারের জন্য প্রতিক্রিয়াটির সমর্থন সম্পর্কে বিশেষত জিজ্ঞাসা করছি।

— বিনহবয়

"কাঁচা এইচটিএমএল স্নিপেটগুলি ব্যবহারের জন্য প্রতিক্রিয়া সমর্থন" বলতে কী বোঝায়?

— ব্রেণো ফেরেরিরা 15'15

2

এখানে পোস্ট করা RawHTML ফাংশনের সামান্য কম অভিমতযুক্ত সংস্করণ's এটি আপনাকে দেয়:

ট্যাগটি কনফিগার করুন
ঐচ্ছিকরূপে প্রতিস্থাপন নতুন লাইন থেকে <br />এর
অতিরিক্ত প্রসেসগুলি পাস করুন যে RawHTML তৈরি উপাদানটিতে পাস করবে
একটি খালি স্ট্রিং সরবরাহ করুন ( RawHTML></RawHTML>)

উপাদানটি এখানে:

const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
    React.createElement(tag, {
        dangerouslySetInnerHTML: {
            __html: nl2br
                ? children && children.replace(/\n/g, '<br />')
                : children,
        },
        ...rest,
    });
RawHTML.propTypes = {
    children: PropTypes.string,
    nl2br: PropTypes.bool,
    tag: PropTypes.string,
};

ব্যবহার:

<RawHTML>{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2">{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First &middot; Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>

আউটপুট:

<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>

এটি চালু হবে:

<RawHTML><h1>First &middot; Second</h1></RawHTML>

— ক্রিশ্চিয়ান ওয়েস্টারবিক
সূত্র

0

আমার মাথায় অনলড বৈশিষ্ট্যযুক্ত একটি লিঙ্ক ব্যবহার করার দরকার ছিল যেখানে ডিভের অনুমতি নেই তাই এটি আমার তাত্পর্যপূর্ণ ব্যথা করেছে। আমার বর্তমান কাজটি হ'ল মূল স্ক্রিপ্ট ট্যাগটি বন্ধ করা, আমার যা করা দরকার তা করা, তারপরে স্ক্রিপ্ট ট্যাগটি খুলুন (মূল দ্বারা বন্ধ করে দেওয়া)। আশা করি এটি এমন কাউকে সহায়তা করতে পারে যার একেবারে অন্য কোনও পছন্দ নেই:

<script dangerouslySetInnerHTML={{ __html: `</script>
   <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans" as="style" onLoad="this.onload=null;this.rel='stylesheet'" crossOrigin="anonymous"/>
<script>`,}}/>

— অ্যাডাম লেন
সূত্র