সতর্কতা: অজানা DOM সম্পত্তি শ্রেণি। আপনি ক্লাসের নাম বোঝাতে চেয়েছিলেন?

Question

আমি একটি সাধারণ রেন্ডার ফাংশন সহ একটি উপাদান যুক্ত করে প্রতিক্রিয়া অন্বেষণ শুরু করেছি:

render() {
  return <div class="myApp"></div>
}

আমি যখন অ্যাপটি চালাচ্ছি তখন আমি নিম্নলিখিত ত্রুটিটি পেয়েছি:

Warning: Unknown DOM property class. Did you mean className?

আমি পরিবর্তন করে এই সমাধান করতে পারে classথেকে className।

প্রশ্ন হচ্ছে; প্রতিক্রিয়া কি এই সম্মেলন কার্যকর করে? এছাড়াও কেন আমি classNameপ্রচলিত পরিবর্তে ব্যবহার করতে হবে class? এটি যদি কোনও বিধিনিষেধ হয় তবে এটি জেএসএক্স সিনট্যাক্সের কারণে বা অন্য কোথাও?

Answer 1

হ্যাঁ, এটি একটি প্রতিক্রিয়া সম্মেলন:

যেহেতু JSX জাভাস্ক্রিপ্ট পায়, তাহলে সেই হিসাবে শনাক্তকারী classএবং forXML গুণটি নাম নিরুৎসাহিত করছে। পরিবর্তে, প্রতিক্রিয়াশীল ডোম উপাদানগুলি যথাক্রমে classNameএবং এর মতো DOM বৈশিষ্ট্যের নাম আশা htmlForকরে।

গভীরতার জেএসএক্স ।

Comments

আমি এটি মারাত্মকভাবে স্বল্পরূপে পাই। আমি মনে করি পার্সারটিকে প্রসঙ্গের ভিত্তিতে দুটি ভাষার মধ্যে কীভাবে প্রসঙ্গ পরিবর্তন করতে হবে, প্রোগ্রামার এবং সরঞ্জামগুলিকে বোঝা বন্ধ রাখতে হবে

— জোনাথন

Answer 2

উল্কাপাত ES5 থেকে ES6 (ES2015) এ স্থানান্তর করতে ব্যাবেল ব্যবহার করে, তাই আমরা এটির সাথে ব্যাড ট্রান্সপোর্টার যুক্ত হওয়ার সাথে একটি নোডের সাধারণ অ্যাপ্লিকেশন হিসাবে মোকাবেলা করতে পারি।

আপনি যোগ করতে হবে .babelrcআপনার প্রকল্পের রুট ফোল্ডারে ফাইল, এবং নিম্নোক্ত আইটেমগুলি যোগ

{
  "plugins": [
    "react-html-attrs"
  ]
}

এবং অবশ্যই, আপনাকে এই প্লাগইনটি ব্যবহার করে ইনস্টল করতে হবে npm:

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

Comments

ধন্যবাদ, ইনস্টল প্রতিক্রিয়া-ফেসবুক-লগইন করার পরে আমি "অবৈধ ডিওএম" ঠিক করতে পারি।

— কাকাশি

Answer 3

React.js তে কোনও শ্রেণিগত বৈশিষ্ট্য উপলব্ধ নেই তাই আমাদের ব্যবহারের প্রয়োজন

for   --> htmlFor
class --> className

Answer 4

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

এবং এর পরিবর্তে এইচটিএমএলঅ্যাট্রিবিউট ব্যবহার করুন।

Answer 5

এইচটিএমএলে আমরা ব্যবহার করি

class="navbar"

তবে প্রতিক্রিয়া এবং প্রতিক্রিয়াশীল কোনও HTML নেই, আমরা এখানে জেএসএক্স (জাভাস্ক্রিপ্ট এক্সএমএল) ব্যবহার করি

className="navbar"

Answer 6

জেএক্সএক্স সিনট্যাক্স যখন ব্যাবেল ব্যবহার করে সংকলিত হবে, অন্তর্নিহিত বাক্য গঠনটি এটি HTML উপাদান তৈরি করতে ব্যবহার করবে

   React.createElement('div', {attributes}, "Hello");

যদি আমরা ক্লাসনেমের পরিবর্তে ক্লাসটি ব্যবহার করি তবে প্রতিক্রিয়াটি এটিকে এইচটিএমএল শ্রেণির বৈশিষ্ট্যের পরিবর্তে জাভাস্ক্রিপ্ট শ্রেণি হিসাবে চিহ্নিত করবে। [কারণ জাভাস্ক্রিপ্ট ক্লাস তৈরি করতে ফাইলটিতে ভেরিয়েবলের নাম 'বর্গ' ইতিমধ্যে ব্যবহৃত হয়েছে এবং একই উদ্দেশ্যে সংরক্ষণ করা হয়েছে]। যা ভুল এবং সংকলক ত্রুটি ছুঁড়ে ফেলেছে, যেহেতু জাভাস্ক্রিপ্ট শ্রেণিটি এইচটিএমএল ডিওএম উপাদানগুলির জন্য একটি বৈধ সম্পত্তি নয়।

   React.createElement("p", {"class": "header"}, "Hello");

সুতরাং ক্লাসের পরিবর্তে ক্লাসনেম ব্যবহার করা প্রয়োজন।

   React.createElement("p", {"className": "header"}, "Hello")