রিঅ্যাক্টজেএস উপাদানগুলির নাম অবশ্যই মূলধনপত্রের সাথে শুরু করা উচিত?


148

আমি জেএসবিনে রিএ্যাকটিজেএস ফ্রেমওয়ার্কের সাথে প্রায় খেলছি

আমি লক্ষ্য করেছি যে আমার উপাদানটির নাম যদি ছোট হাতের অক্ষর দিয়ে শুরু হয় তবে এটি কার্যকর হয় না।

উদাহরণস্বরূপ নিম্নলিখিতটি রেন্ডার করে না:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

কিন্তু যত তাড়াতাড়ি আমি প্রতিস্থাপন fmlসঙ্গে Fmlএটা রেন্ডার নেই।

আমি ছোট চিঠি দিয়ে ট্যাগ শুরু করতে না পারার কোন কারণ আছে?


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

উত্তর:


199

জেএসএক্সে, লোয়ার-কেসের ট্যাগের নামগুলি এইচটিএমএল ট্যাগ হিসাবে বিবেচিত হয়। তবে কোনও বিন্দুর (সম্পত্তি অ্যাকসেসর) লোয়ার-কেসের ট্যাগের নামগুলি নেই।

প্রতিক্রিয়া উপাদানগুলি বনাম এইচটিএমএল ট্যাগগুলি দেখুন ।

  • <component />React.createElement('component')(এইচটিএমএল ট্যাগ) এর সাথে সংকলন করে
  • <Component /> সংকলন React.createElement(Component)
  • <obj.component /> সংকলন React.createElement(obj.component)

11
কাউন্টারে আরও আধা ঘন্টা যুক্ত করুন। আমি উন্মাদ হয়ে যাচ্ছিলাম, এর মতো কিছু রেন্ডার করার চেষ্টা করছিলাম let component = components[compType]; <component/>এবং বাজে ত্রুটি পাচ্ছিলাম ।
জেকিউজ

2
আমি চেষ্টা করেছি <components[name] />যা কোনটি কার্যকর হয় না।
岡 諭

8
আমি বিশ্বাস করতে পারি না যে এর আগে এমন নিয়ম আছে তা আমি লক্ষ্য করি নি।
shaosh

7
এটি একটি খারাপ ধারণা। আমি এখানে নম্র হয়ে যাচ্ছি।
রল্ফ

হ্যাঁ এটি n00bs এ অত্যন্ত অফ-প্লেং হতে পারে, Componentsপরিবর্তে যদি কল করা হয় তবে componentsতাদের সুন্দর সাইটটি কোনও ত্রুটি না থাকলেও কোনও সামগ্রী ছাড়াই লোড হবে!
অলিস্টেডম্যান

45

@ আলেকজান্দ্রে কিরজেনবার্গ খুব ভাল উত্তর দিয়েছেন, কেবল আরও একটি বিবরণ যুক্ত করতে চেয়েছিলেন।

divইত্যাদির মতো সুপরিচিত উপাদানগুলির নামের একটি শ্বেতলিস্ট ধারণ করতে ব্যবহৃত প্রতিক্রিয়া যা এটি ডিওএম উপাদান এবং প্রতিক্রিয়া উপাদানগুলির মধ্যে পার্থক্য করতে ব্যবহৃত হত।

তবে সেই তালিকাটি বজায় রাখা মোটেই মজাদার নয়, এবং ওয়েব উপাদানগুলি কাস্টম উপাদান তৈরি করা সম্ভব করে তোলে, তাই তারা এটিকে একটি নিয়ম করেছে যে সমস্ত প্রতিক্রিয়া উপাদানগুলি অবশ্যই একটি বড় হাতের অক্ষর দিয়ে শুরু করতে হবে, বা একটি বিন্দু থাকতে পারে


3
অফিসিয়াল ডক রেফারেন্স থাকলে আরও দুর্দান্ত তথ্য। ধন্যবাদ।
ওয়াইকিট কুং

কখন এটি পরিবর্তন করা হয়েছিল?
nolawi

11

থেকে সরকারী রেফারেন্স প্রতিক্রিয়া :

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

এটিও নোট করুন:

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

যার অর্থ একটি ব্যবহার করতে হবে:

const Foo = foo;fooজেএসএক্সে উপাদান উপাদান হিসাবে ব্যবহার করার আগে ।


3

কোনও JSXট্যাগের প্রথম অংশটি বিক্রিয়া উপাদানের প্রকারটি নির্ধারণ করে, মূলত কিছুটা কনভেনশন রয়েছে মূলধন, ছোট হাতের বাট, বিন্দু চিহ্নিতকরণ

বড় হাতের অক্ষরে লেখা এবং ডট স্বরলিপি ধরনের ইঙ্গিত দেয় যে JSXট্যাগটি উল্লেখ করা হয় উপাদান প্রতিক্রিয়া, তাই আপনি যদি JSX ব্যবহার <Foo />কম্পাইল React.createElement(Foo)
বা
<foo.bar />কম্পাইল React.createElement(foo.bar)একটি উপাদান সংজ্ঞায়িত করুন অথবা আপনার জাভা স্ক্রিপ্ট ফাইলে আমদানিকৃত প্রয়োজন এবং মিলা।

যখন ছোট হাতের ধরণটি একটি অন্তর্নির্মিত উপাদানটিকে <div>বা যেমন <span>স্ট্রিংয়ে 'div'বা 'span'পাসের ফলাফলকে নির্দেশ করে React.createElement('div')

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


2

জেএসএক্সে, এক্সএএমএলকে সামঞ্জস্যপূর্ণ করার জন্য প্রতিক্রিয়া শ্রেণিগুলি মূলধন করা হয়, যাতে এটি কোনও এইচটিএমএল ট্যাগের জন্য ভুল না হয়। প্রতিক্রিয়া শ্রেণিগুলি যদি মূলধন না হয় তবে এটি পূর্বনির্ধারিত জেএসএক্স সিনট্যাক্স হিসাবে একটি এইচটিএমএল ট্যাগ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.