প্রতিক্রিয়াটির জেএসএক্স সিনট্যাক্সে ডাবল কোঁকড়ানো ধনুর্বন্ধনীগুলির উদ্দেশ্য কী?

Question

থেকে react.js টিউটোরিয়াল আমরা ডবল কোঁকড়া ধনুর্বন্ধনী এই ব্যবহার দেখুন:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

এবং তারপরে দ্বিতীয় টিউটোরিয়ালে, "প্রতিক্রিয়া চিন্তাভাবনা" :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

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

Comments

ডকুমেন্টেশন থেকেThe exterior set of curly braces are letting JSX know you want a JS expression. The interior set of curly braces represent a JavaScript object, meaning you’re passing in a object to the style attribute.

— সায়ান

Answer 1

এটি প্রপ ভ্যালুতে আক্ষরিক অন্তর্নিহিত একটি অবজেক্ট এটা যেমন হয়

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Comments

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

— বেন রবার্টস

@ বেনরোবার্টস গ্রেট, আপনাকে ধন্যবাদ! দুর্ভাগ্যক্রমে আমি এই দিনে ক্যালিফোর্নিয়ায় বাইরে আছি তবে ফ্রিওনডে # রিয়্যাক্টজ আইআরসি ঘরটি নির্দ্বিধায় ফেলেছি এবং আমি প্রশ্নের উত্তর দিতে পেরে খুশি হব।

— সোফি আল্পার্ট

@ বেনআল্পার্ট আপনি কি জানতে পেরে এর dangerouslySetInnerHTML={__html: rawMarkup}পরিবর্তে চিন্তাভাবনাটি কী ছিল dangerouslySetInnerHTML={rawMarkup}? এটি কি কারণ অবজেক্টটি {__html: rawMarkup}পরিবর্তনীয় এবং একটি স্ট্রিং নেই?

— ব্রায়ান কুং

@Brian: দেখুন github.com/facebook/react/issues/2256#issuecomment-63031960 (এবং github.com/facebook/react/blob/... )।

— ফেলিক্স ক্লিং

Answer 2

কোঁকড়া ধনুর্বন্ধনী এখানে 2 ব্যবহার হয়েছে: -

1. {.. J জেএসএক্সের একটি অভিব্যক্তির মূল্যায়ন করে।
2. {কী: মান জাভাস্ক্রিপ্ট অবজেক্টকে বোঝায়।

একটি সহজ উদাহরণ দেখতে দিন।

<Image source={pic} style={{width: 193}}/>

যদি আপনি পর্যবেক্ষণ করেন picবক্রবন্ধনী দ্বারা বেষ্টিত হয়। এটি ভেরিয়েবল এম্বেড করার জেএসএক্স উপায়। picযে কোনও জাভাস্ক্রিপ্ট এক্সপ্রেশন / ভেরিয়েবল / অবজেক্ট হতে পারে। আপনি {2 + 3 like এর মতোও কিছু করতে পারেন এবং এটি {5 to এ মূল্যায়ন করবে

এখানে স্টাইল বিচ্ছেদ করা যাক। {width: 193}একটি জাভাস্ক্রিপ্ট অবজেক্ট। এবং এই বিষয়টিকে জেএসএক্স এম্বেড করতে আপনার কোঁকড়া ধনুর্বন্ধনী প্রয়োজন, অতএব,{ {width: 193} }

দ্রষ্টব্য: জেএসএক্সে যে কোনও ধরণের জাভাস্ক্রিপ্ট এক্সপ্রেশন / ভেরিয়েবল / অবজেক্ট এম্বেড করতে আপনার কোঁকড়া ধনুর্বন্ধনী প্রয়োজন।

Comments

গৃহীত হিসাবে চিহ্নিত উত্তরটির তুলনায় আমি এই উত্তরটিকে আরও ব্যাখ্যাযোগ্য বলে মনে করি।

— রোহিত মান্দিওয়াল

@ রোহিতমন্দীওয়াল আপনাকে ধন্যবাদ স্যার। আমি জানি আপনি যখন একটি কোঁকড়ানো বন্ধনী অন্যের ভিতরে পেয়েছিলেন তখন এটি কিছুটা বিভ্রান্ত হয়।

— মাভা 55

Answer 3

আপনি যদি না জানতেন {{color: 'red'}}তবে styleট্যাগটিতে কেন ব্যবহৃত হয়

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

অফিসিয়াল ডকুমেন্টেশনের প্রতিক্রিয়া অনুসারে , স্টাইল বৈশিষ্ট্যটি CSS স্ট্রিংয়ের পরিবর্তে একটি জাভাস্ক্রিপ্ট অবজেক্ট গ্রহণ করে ।

Answer 4

প্রতিক্রিয়া জেএসএক্স ব্যবহার করে, জেএসএক্সে কোনও পরিবর্তনশীল, রাষ্ট্রীয় অবজেক্ট, এক্সপ্রেশন ইত্যাদি {} এ আবদ্ধ থাকতে হবে}

জেএসএক্সে ইনলাইন শৈলী দেওয়ার সময়, এটি কোনও অবজেক্ট হিসাবে নির্দিষ্ট করতে হবে যাতে এটি আবার কোঁকড়া ধনুর্বন্ধনী ভিতরে থাকতে হবে। {}।

এই কারণেই দুটি জোড়া কোঁকড়ানো ধনুর্বন্ধনী রয়েছে

Answer 5

এর অর্থ একটি শৈলীর পরিবর্তনশীল ঘোষণার পরিবর্তে যা উদ্দেশ্যে করা শৈলীর বৈশিষ্ট্যগুলির উদ্দেশ্যে নির্ধারিত হয় আপনি কেবল কোনও বস্তুতে শৈলীর বৈশিষ্ট্য নির্ধারণ করতে পারেন ... আপনি সাধারণত যে স্টাইলগুলি যুক্ত করতে চান সেগুলি হ'ল তবে এটি সাধারণত সেরা অনুশীলন is যে উপাদানটির আরও শৈলীর প্রয়োজন এটি স্টাইলের পরিবর্তনশীল ঘোষণা করার জন্য এটি পরিষ্কার clean

উদাহরণস্বরূপ, কম স্টাইলের বৈশিষ্ট্যযুক্ত কোনও উপাদানের জন্য এটি করুন

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

আরও শৈলীর বৈশিষ্ট্যযুক্ত এইচটিএমএল উপাদানগুলির জন্য এটি করুন

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

তারপরে আপনি এটিকে jsx সিনট্যাক্স দিয়ে কল করবেন

<span style={spanStyle}>
  {this.props.product.name}
</span>

Answer 6

আমি সবার মধ্যে বোধগম্য হওয়ার জন্য সহজ কথায় এটি বলার চেষ্টা করি। নীচের কোড:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

সমান

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

সুতরাং, আমরা যদি কোনও সম্পত্তিতে একটি আক্ষরিক বস্তু নির্ধারণ করতে যাচ্ছি তবে কেবল আমাদের প্রতিক্রিয়া প্রকাশ করতে হবে ।

কিছু লোক যারা প্রধানত ReactJs করার AngularJs থেকে সরানোর হয়, এটি সম্ভবত AngularJs 'অভিব্যক্তি বাঁধাই অপারেটর সঙ্গে বিভ্রান্তির একটি অংশ {{}} । সুতরাং, রিএ্যাকটিজে এটিকে অন্যভাবে দেখার চেষ্টা করুন।

Comments

আপনার দুটি কোডের টুকরোগুলি বিন্যাস বাদে ঠিক একই রকম বলে মনে হচ্ছে।

— jcollum

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

— অআআআআআআআআআআআআআআআআ।

আমি এখনও এটি পাই না

— অ্যান্ড্রু ল্যাম

@ অ্যান্ড্রুলাম - সবেমাত্র এটি সম্পাদনা করা হয়েছে। এখন কি বুঝতে পারছেন?

— এহসান

Answer 7

ডাবল কোঁকড়া বন্ধনী সম্পর্কে আমার ব্যাখ্যাটি হ'ল স্টাইল অবজেক্টটি কেবল একটি জাভাস্ক্রিপ্ট অবজেক্ট গ্রহণ করে, তাই অবজেক্টটি একক কোঁকড়ানো বন্ধনীগুলির মধ্যে থাকতে হবে।

style={jsObj}

স্টাইল আর্টিক্টসের জন্য বস্তুটি মূল হ'ল: মান জোড়া (অভিধান বনাম একটি অ্যারে) এবং সেই বস্তুটি উদাহরণস্বরূপ, হিসাবে প্রকাশ করা হয় {color:'#ffffff'}।

সুতরাং আপনি পেয়েছেন:

style = { jsObj }

এবং

jsObj = {color:'#ffffff'}

বীজগণিতের মতো, আপনি যখন বিকল্প প্রতিস্থাপন করেন, তখন দাঁড়িয়ে থাকে:

style = { {color:'#ffffff'} }