প্রতিক্রিয়া - প্রপসগুলিতে এইচটিএমএল ট্যাগগুলি কীভাবে পাস করবেন?

Question

আমি এইচটিএমএল ট্যাগ সহ পাঠ্য পাস করতে সক্ষম হতে চাই:

<MyComponent text="This is <strong>not</strong> working." />

কিন্তু MyComponentরেন্ডার পদ্ধতির অভ্যন্তরে আমি যখন মুদ্রণ করি তখন this.props.textআক্ষরিক অর্থে সমস্ত কিছু প্রিন্ট করে:

This is <strong>not</strong> working.

প্রতিক্রিয়া পার্সটি এইচটিএমএল করার এবং এটি সঠিকভাবে ফেলে দেওয়ার কোনও উপায় আছে কি?

Comments

আপনার আসল রেন্ডার ফাংশনটি কী?

— লুসিও

সাধারণ প্যাটার্নটি হ'ল আপনার সামগ্রীর বাচ্চাদের <MyComponent>This is <strong>not</strong> working</MyComponent>প্রপস হিসাবে পাস করার পরিবর্তে আপনার উপাদানগুলির সন্তান তৈরি করা । আপনি যা বাস্তবায়নের জন্য চেষ্টা করছেন তার উপর আপনি আরও প্রসঙ্গ দিতে পারেন?

— নিক টমলিন

প্রায় একই প্রশ্ন: প্রতিক্রিয়াগুলি এইচটিএমএল রূপান্তর করে ।

— টটিমেডলি

Answer 1

আপনি স্ট্রিং এবং জেএসএক্স উপাদানগুলির সাথে মিশ্র অ্যারে ব্যবহার করতে পারেন ( এখানে ডক্স দেখুন ):

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

এখানে একটি ফ্রিডল রয়েছে যা এটি কাজ করে দেখায়: http://jsfiddle.net/7s7dee6L/

এছাড়াও, সর্বশেষ অবলম্বন হিসাবে, আপনি সর্বদা কাঁচা এইচটিএমএল সন্নিবেশ করার ক্ষমতা রাখেন তবে সতর্ক থাকুন কারণ এটি যদি সম্পত্তির মানগুলি স্যানিটাইজ না করে তবে ক্রস-সাইট স্ক্রিপ্টিং (এক্সএসএস) আক্রমণ চালিয়ে দিতে পারে।

Comments

এটি কাজ করে, আমি এখনই একটি সতর্কতা পেয়েছি: সতর্কতা: অ্যারে বা পুনরুক্তি করা প্রতিটি শিশুর একটি অনন্য "কী" প্রপস থাকা উচিত। সিটিএর রেন্ডার পদ্ধতিটি পরীক্ষা করুন। এটি টেমপ্লেট 1 থেকে একটি শিশু পাস হয়েছিল। আরও তথ্যের জন্য fb.me/react-warning-keys দেখুন ।

— ffxsam

আপনি অ্যারের মাধ্যমে গিয়ে এই সূত্রটি মাই কম্পোম্পোনেন্টে কী হিসাবে সূচিটি যুক্ত করে এড়াতে পারেন {text.map( textOrHTML, index) => <span key={index}>{textOrHTML}</span> )} যদিও এটি এতই আশ্চর্যজনক যে আমাদের এটি পুরোপুরি প্রথম স্থানে করতে হবে।

— হুসিএনকে

এছাড়াও আপনি নির্বাণ দ্বারা কোনো রকম সতর্কতা ঠিক করতে পারবো key="[some unique value]"উপর <strong>উপাদান।

— চাদ জনসন

সুন্দর, ভাল কাজ করছে, আমি জানতে চাই যে স্ট্রিং 'না' এর পরিবর্তে আমি কীভাবে শক্তিশালী ভিতরে পরিবর্তনশীলটি ব্যবহার করতে পারি

— জাইসন

অ্যারে কী সতর্কতা অপসারণ করতে, এখন একটি সিএসএস জেএসএক্স পাস করাও সম্ভব। <MyComponent text={<>This is <strong>not</strong> working.</>} />

— আরিফ

Answer 2

আসলে, এটির সাথে যাওয়ার একাধিক উপায় রয়েছে।

আপনি আপনার প্রপসের অভ্যন্তরে জেএসএক্স ব্যবহার করতে চান

জেএসএক্সকে প্যারামিটারটি বিশ্লেষণের জন্য আপনি কেবল {use ব্যবহার করতে পারেন। প্রতিটি জেএসএক্স উপাদানগুলির জন্য একমাত্র সীমাবদ্ধতা একই: এটি কেবলমাত্র একটি মূল উপাদানকে ফেরত দিতে হবে।

myProp={<div><SomeComponent>Some String</div>}

এর জন্য সবচেয়ে ভাল পঠনযোগ্য উপায় হ'ল জাইএক্সএক্স উপাদানগুলি (স্ট্যান্ডার্ড রেন্ডার ফাংশনের মতো) ফিরিয়ে আনবে এমন একটি ফাংশন রেন্ডারমিপ্রপ তৈরি করা এবং তারপরে কেবল মাইপ্রপ = {this.renderMyProp ()}

আপনি কেবল স্ট্রিং হিসাবে এইচটিএমএল পাস করতে চান

ডিফল্টরূপে, জেএসএক্স আপনাকে স্ট্রিং মান থেকে কাঁচা এইচটিএমএল রেন্ডার করতে দেয় না। তবে এটি করার একটি উপায় রয়েছে:

myProp="<div>This is some html</div>"

তারপরে আপনার উপাদানগুলিতে আপনি এটির মতো ব্যবহার করতে পারেন:

<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>

সাবধান যে এই সমাধানটি ক্রস-সাইট স্ক্রিপ্টিং জালিয়াতির আক্রমণগুলিতে 'খুলতে' পারে। এছাড়াও সাবধান যে আপনি কেবল সাধারণ এইচটিএমএল, কোনও জেএসএক্স ট্যাগ বা উপাদান বা অন্যান্য অভিনব জিনিস রেন্ডার করতে পারবেন না।

অ্যারে উপায়

প্রতিক্রিয়া হিসাবে, আপনি জেএসএক্স উপাদানগুলির একটি অ্যারে পাস করতে পারেন। এর মানে:

myProp={["This is html", <span>Some other</span>, "and again some other"]}

আমি এই পদ্ধতির সুপারিশ করব না কারণ:

• এটি একটি সতর্কতা তৈরি করবে (কীগুলি হারিয়েছে)
• এটি পাঠযোগ্য নয়
• এটি আসলে জেএসএক্স উপায় নয়, এটি একটি নকশাকৃত ডিজাইনের চেয়ে বেশি হ্যাক।

বাচ্চাদের পথ

সম্পূর্ণতার জন্য এটি যুক্ত করা কিন্তু প্রতিক্রিয়া হিসাবে, আপনি সমস্ত উপাদানগুলি যেগুলি আপনার উপাদানগুলির 'অভ্যন্তরে' রয়েছে তা পেতে পারেন।

সুতরাং যদি আমি নিম্নলিখিত কোডটি গ্রহণ করি:

<SomeComponent>
    <div>Some content</div>
    <div>Some content</div>
</SomeComponent>

তারপরে দুটি ডিভস সামার কম্পোনেন্টে এটি.পড়গুলি.চাইল্ডার হিসাবে উপলব্ধ হবে এবং স্ট্যান্ডার্ড}} সিনট্যাক্সের সাথে রেন্ডার করা যেতে পারে।

আপনার সংস্থায় যাওয়ার জন্য আপনার কাছে কেবলমাত্র একটি HTML লিখিত সামগ্রী থাকলে এই সমাধানটি নির্ভুল হয় (কোনও পপিন উপাদান কল্পনা করুন যা পপিনের সামগ্রীটি কেবল শিশু হিসাবে গ্রহণ করে)।

তবে আপনার যদি একাধিক বিষয়বস্তু থাকে তবে আপনি শিশুদের ব্যবহার করতে পারবেন না (বা কমপক্ষে আপনাকে এখানে অন্য কোনও সমাধানের সাথে একত্রিত করতে হবে)

Comments

this.props.childrens - কিন্তু this.props.children। 'এর' reactjs.org/docs/glossary.html#propchildren

— আলেকিয়াসক্রো

Answer 3

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

সাধারণ স্ট্রিং হিসাবে কেবল এইচটিএমএল প্রেরণ করুন

<MyComponent text="This is <strong>not</strong> working." />

এবং এর মতো জেএসএক্স কোডটি রেন্ডার করুন:

<h2 className="header-title-right wow fadeInRight"
    dangerouslySetInnerHTML={{__html: props.text}} />

আপনি যদি ব্যবহারকারী দ্বারা প্রবেশ করা ডেটা উপস্থাপন করছেন তবে কেবল সতর্কতা অবলম্বন করুন। আপনি এক্সএসএস আক্রমণে শিকার হতে পারেন

এখানে ডকুমেন্টেশনটি রয়েছে: https://facebook.github.io/react/tips/danजेly-set-inner-html.html

Answer 4

<MyComponent text={<span>This is <strong>not</strong> working.</span>} />

এবং তারপরে আপনার উপাদানগুলিতে আপনি প্রপ চেক করতে পারেন:

import React from 'react';
export default class MyComponent extends React.Component {
  static get propTypes() {
    return {
      text: React.PropTypes.object, // if you always want react components
      text: React.PropTypes.any, // if you want both text or react components
    }
  }
}

নিশ্চিত করুন যে আপনি কেবলমাত্র একটি প্রপ বেছে নিয়েছেন।

Answer 5

আমার জন্য এটি প্রস বাচ্চাদের এইচটিএমএল ট্যাগ পাস করে কাজ করেছিল

<MyComponent>This is <strong>not</strong> working.</MyComponent>


var MyComponent = React.createClass({

   render: function() {
    return (
      <div>this.props.children</div>
    );
   },

Answer 6

প্রতিক্রিয়া v16.02 থেকে আপনি একটি খণ্ড ব্যবহার করতে পারেন।

<MyComponent text={<Fragment>This is an <strong>HTML</strong> string.</Fragment>} />

আরও তথ্য: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Answer 7

ক্লায়েন্ট-পক্ষের প্রতিক্রিয়া প্রয়োগের ক্ষেত্রে, কিছু এইচটিএমএল সহ স্ট্রিং হিসাবে প্রপকে রেন্ডার করার কয়েকটি উপায় রয়েছে couple একটি অন্যের চেয়ে নিরাপদ ...

1 - প্রপকে জেএসএক্স হিসাবে परिभाषित করুন (আমার পছন্দ)

const someProps = {
  greeting: {<div>Hello<a href="/${name_profile}">${name_profile}</a></div>}
}


const GreetingComopnent = props => (
  <p>{props.someProps.greeting}</p>
)

Here এখানে কেবলমাত্র প্রয়োজনীয়তা হ'ল এই প্রোপটি যে যা ফাইল তৈরি করছে তা নির্ভরতা হিসাবে প্রতিক্রিয়া অন্তর্ভুক্ত করা দরকার (যদি আপনি কোনও সহায়িকার ফাইলের মধ্যে প্রপের জেএসএক্স উত্পাদন করছেন)।

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

const someProps = {
  greeting: '<React.Fragment>Hello<a href="https://stackoverflow.com/${name_profile}">${name_profile}</a></React.Fragment>'
}

const GreetingComponent = props => {
  const innerHtml = { __html: props.someProps.greeting }
  return <p dangerouslySetInnerHtml={innerHtml}></p>
}

• এই দ্বিতীয় পদ্ধতির নিরুৎসাহিত করা হয়। এমন কোনও ইনপুট ক্ষেত্রটি কল্পনা করুন যার ইনপুট মানটি এই উপাদানটিতে প্রপ হিসাবে উপস্থাপিত হয়। কোনও ব্যবহারকারী ইনপুটটিতে একটি স্ক্রিপ্ট ট্যাগ প্রবেশ করতে পারে এবং যে উপাদানটি এই ইনপুটটিকে রেন্ডার করে তা এই সম্ভাব্য দূষিত কোডটি কার্যকর করে। এই হিসাবে, এই পদ্ধতির ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতাগুলি প্রবর্তনের সম্ভাবনা রয়েছে। আরও তথ্যের জন্য, অফিসিয়াল প্রতিক্রিয়া ডক্স দেখুন refer

Answer 8

পাঠ্য ঠেকনা টাইপ সেট করুন কোন এবং এই একটি করুন:

<MyComponent text={
    <React.Fragment>
        <div> Hello, World!</div>
    </React.Fragment>
    } 
/>

উদাহরণ

Answer 9

আপনি এটি 2 উপায়ে করতে পারেন যা সম্পর্কে আমি সচেতন।

1- <MyComponent text={<p>This is <strong>not</strong> working.</p>} />

এবং তারপরে এটি করুন

class MyComponent extends React.Component {
   render () {
     return (<div>{this.props.text}</div>)
   }
}

বা দ্বিতীয় পদ্ধতির এটি এই মত না

2- <MyComponent><p>This is <strong>not</strong> working.</p><MyComponent/>

এবং তারপরে এটি করুন

class MyComponent extends React.Component {
   render () {
     return (<div>{this.props.children}</div>)
   }
}

Comments

আমি একটি পরিবর্তনশীল যুক্ত করেছি let vhtml = "<p>Test</p>"এবং প্রপটিতে এটি ব্যবহার করেছি text={vhtml}এবং এটি এখনও কোনও কারণে সাদামাটা পাঠ্যে রেন্ডার হয়েছে।

— Si8

Answer 10

@ মাতাগাসের উত্তর আমার পক্ষে ঠিক আছে, আশা করি নীচে স্নিপেট তাদের জন্য সহায়তা করবে যারা ভিতরে পরিবর্তনক ব্যবহার করতে চান।

const myVar = 'not';
<MyComponent text={["This is ", <strong>{`${myVar}`}</strong>,  "working."]} />

Answer 11

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

defaultSelection : {
    innerHtml: {__html: '<strong>some text</strong>'}
}

ডিফল্টস্লেশন অবজেক্টটি .jsফাইল থেকে উপাদানকে দেওয়া হয়

<HtmlSnippet innerHtml={defaultSelection.innerHtml} />

এইচটিএমএল স্নিপেট উপাদান

var HtmlSnippet = React.createClass({
  render: function() {
    return (
      <span dangerouslySetInnerHTML={this.props.innerHtml}></span>
    );
  }
});

Plunkr উদাহরণ

বিপজ্জনকভাবে সেটইনার এইচটিএমএল-এর জন্য ডকের প্রতিক্রিয়া জানান

Answer 12

আপনি jsx বরাবর প্রপস দিয়ে যাওয়ার জন্য উপাদানটিতে কোনও ফাংশন ব্যবহার করতে পারেন। মত:

 var MyComponent = React.createClass({

   render: function() {
    return (
      <OtherComponent
        body={this.body}
      />
    );
   },

   body() {
     return(
       <p>This is <strong>now</strong> working.<p>
     );
   }

});

var OtherComponent = React.createClass({

  propTypes: {
    body: React.PropTypes.func
  },

  render: function() {
     return (
        <section>
          {this.props.body()}
        </section>
     );
  },

});

Answer 13

হ্যাঁ, আপনি স্ট্রিং এবং জেএসএক্স উপাদানগুলির সাথে মিক্স অ্যারে ব্যবহার করে এটি করতে পারেন। উল্লেখ

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

Answer 14

থেকে পার্সার এইচটিএমএল-প্রতিক্রিয়া-পার্সার একটি ভাল সমাধান। তোমাকে শুধু করতে হবে

• এটি এনপিএম বা সুতা দিয়ে ইনস্টল করুন
• 'এইচটিএমএল-রিএ্যাক্ট-পার্সার' থেকে পার্সার আমদানি করুন;

• এটি দিয়ে কল করুন:

  <MyComponent text=Parser("This is <strong>not</strong> working.") />

  এবং এটি ভাল কাজ করে।

Answer 15

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

const TestPage = () => (
  <Fragment>
    <MyComponent property={
    {
      html: (
        <p>This is a <a href='#'>test</a> text!</p>
      )
    }}>
    </MyComponent>
  </Fragment>
);

Answer 16

এই প্রশ্নটির ইতিমধ্যে প্রচুর উত্তর রয়েছে, তবে আমি এ সম্পর্কিত কিছু ভুল করছিলাম এবং আমি মনে করি এটি ভাগ করে নেওয়া ভাল:

আমার এরকম কিছু ছিল:

export default function Features() {
  return (
    <Section message={<p>This is <strong>working</strong>.</p>} />
  }
}

তবে ম্যাসেজটি এর চেয়ে দীর্ঘ ছিল, তাই আমি এরকম কিছু ব্যবহার করার চেষ্টা করেছি:

const message = () => <p>This longer message is <strong>not</strong> working.</p>;

export default function Features() {
  return (
    <Section message={message} />
  }
}

ফাংশন কলে আমি () মিস করছি তা বুঝতে আমার কিছুটা সময় লেগেছে।

কাজ করছে না

<Section message={message} />

ওয়ার্কিং

<Section message={message()} />

এটি যেমন আপনাকে সাহায্য করেছিল, তেমনি এটি আপনাকেও সহায়তা করে!

Answer 17

আপনি এই কাজের জন্য প্রতিক্রিয়া টুকরা সফলভাবে ব্যবহার করতে পারেন । : প্রতিক্রিয়া সংস্করণ ব্যবহার করেন তার উপর ভিত্তি করে, আপনি সংক্ষিপ্ত সিনট্যাক্স ব্যবহার করতে পারেন <>বা পূর্ণ ট্যাগ: <React.Fragment>। আপনি যদি HTML ট্যাগগুলির মধ্যে পুরো স্ট্রিং মোড়তে না চান তবে বিশেষত ভাল কাজ করে।

<MyComponent text={<>Hello World. <u>Don't be so ruthless</u>.</>} />

Answer 18

আমরা একই জিনিসটি এমনভাবে করতে পারি।

const Child = () => {
  return (
     write your whole HTML here.
  )
}

এখন আপনি এই এইচটিএমএলটিকে অন্য উপাদানগুলির মধ্যে পাঠাতে চান যা নাম প্যারেন্ট উপাদান।

কলিং: -

<Parent child={<child/>} >
</Parent> 

সন্তানের ব্যবহার: -

 const Parent = (props) => {
   const { child } = props; 
   return (
       {child}
    )
}

এই কাজটি আমার পক্ষে নিখুঁত।

Answer 19

JQuery অ্যাপেনড ব্যবহার করে কম্পোনেন্টডিডমাউন্টে এইচটিএমএল যুক্ত করেছেন। এই সমস্যার সমাধান করা উচিত।

 var MyComponent = React.createClass({
    render: function() {

        return (
           <div>

           </div>
        );
    },
    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).append(this.props.text);
    }
});

Comments

এটি নিচে ভোট দেওয়া হয়েছে কারণ আপনি জ্যাকেরির সরাসরি ডিওএম ম্যানিপুলেশন ব্যবহার করে রিঅ্যাক্টের পরোক্ষ ডোম ম্যানিপুলেশনের সাথে ব্যবহার করা উচিত নয়, কারণ এটি ব্রাউজারকে মারতে পারে।

— অ্যালিসন