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



reactjs (7)

আপনি এনটিএম মডিউল html-to-react

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

https://src-bin.com

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

// 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>

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

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


Answer #1

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

<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>`,}}/>

Answer #2

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

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

বৈশিষ্ট্য

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

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


Answer #3

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

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

Answer #4

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

  • ট্যাগটি কনফিগার করুন
  • /চ্ছিকভাবে <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>

Answer #5

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

আপনার কাঁচা এইচটিএমএল (যেমন, ডোমপুরিফাই ব্যবহার করে) dangerouslySetInnerHTML সেটেইনার এইচটিএমএল এর মাধ্যমে ডোমে ইনজেক্ট করার আগে স্যানিটাইজ করা ভাল / নিরাপদ।

DOMPurify - এইচটিএমএল, ম্যাথএমএল এবং DOMPurify একটি ডোম-কেবলমাত্র, সুপার-ফাস্ট, উবার-সহনশীল এক্সএসএস স্যানিটাইজার। 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

Answer #6
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>
            )
    }
}




reactjs