188

renderপ্রতিক্রিয়া উপাদানটিতে আমি কীভাবে পদ্ধতির অভ্যন্তরে মন্তব্যগুলি ব্যবহার করতে পারি ?

আমার নিম্নলিখিত উপাদান রয়েছে:

'use strict';
 var React = require('react'),
   Button = require('./button'),
   UnorderedList = require('./unordered-list');

class Dropdown extends React.Component{
  constructor(props) {
    super(props);
  }
  handleClick() {
    alert('I am click here');
  }

  render() {
    return (
      <div className="dropdown">
        // whenClicked is a property not an event, per se.
        <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
        <UnorderedList />
      </div>
    )
  }
}

module.exports = Dropdown;

এখানে চিত্র বর্ণনা লিখুন

আমার মন্তব্যগুলি ইউআইতে প্রদর্শিত হচ্ছে।

কোন উপাদানটির রেন্ডার পদ্ধতির অভ্যন্তরে একক এবং একাধিক লাইন মন্তব্য প্রয়োগ করার সঠিক পন্থাটি কী হবে?

reactjs react-native

— meDeepakJain
সূত্র

3

একক উত্তর সহ ভাল প্রশ্ন। 12 টি উত্তর দিয়ে বোকা বোকাবেন না! তারা সকলেই একই জিনিস সম্পর্কে কথা বলে:{/* JSX comment*/}

— জ্যাক মিলার

272

সুতরাং renderপদ্ধতির মধ্যে মন্তব্যের অনুমতি দেওয়া হয়েছে তবে জেএসএক্সের মধ্যে সেগুলি ব্যবহার করার জন্য আপনাকে সেগুলি ব্রেসগুলিতে আবদ্ধ করতে হবে এবং মাল্টি-লাইন স্টাইল মন্তব্যগুলি ব্যবহার করতে হবে।

<div className="dropdown">
    {/* whenClicked is a property not an event, per se. */}
    <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
    <UnorderedList />
</div>

কিভাবে মন্তব্য JSX কাজ আপনি সম্বন্ধে আরও পড়তে পারেন এখানে

— হেনরিক অ্যান্ডারসন
সূত্র

কেন জানি না তবে এটি সর্বদা আমাকে খারাপ কোড বা কোডে কিছু ভুলের অনুভূতি দেয়। অন্য কথায়, মনে হচ্ছে মন্তব্য করা আমার কোডে এইভাবে সামঞ্জস্য করছে না। আমি নিশ্চিত যদি আমি ডবল স্ল্যাশ শৈলী ব্যবহার করা হয়েছিল নই //মন্তব্য

— আদি

2

এবং <div> </div> something / * মন্তব্য * / like এর মতো কিছু ত্রুটি তৈরি করে। মন্তব্য অবশ্যই একটি নতুন লাইনে থাকা উচিত।

— আমির শাবানী

46

এখানে আরও একটি পদ্ধতি যা আপনাকে //মন্তব্যগুলি অন্তর্ভুক্ত করতে ব্যবহার করতে দেয় :

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

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

{// your comment cannot be like this}

কারণ বন্ধনী বন্ধনী }মন্তব্যটির অংশ হিসাবে বিবেচিত এবং এইভাবে উপেক্ষা করা হয়, যা ত্রুটি ছুঁড়ে দেয়।

— anandharshan
সূত্র

7

@ লুকেকেলেলসেন এটি আসলে কাজ করে কারণ তিনি //বর্গাকার বন্ধনীগুলিতে আবদ্ধ ছিলেন ।

— মার্টিন ডসন

21

অন্যদিকে, নিম্নলিখিতটি একটি বৈধ মন্তব্য, কার্যকারী অ্যাপ্লিকেশন থেকে সরাসরি টানা:

render () {
    return <DeleteResourceButton
            //confirm
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

পরিষ্কারভাবে, যখন কোনও জেএসএক্স উপাদানের কোণ বন্ধনীগুলির ভিতরে থাকে তখন //বাক্য গঠনটি বৈধ হয়, তবে এটি {/**/}অবৈধ। নিম্নলিখিত বিরতি:

render () {
    return <DeleteResourceButton
            {/*confirm*/}
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

— papiro
সূত্র

10

এই হল কিভাবে.

বৈধ:

...
render() {

  return (
    <p>
       {/* This is a comment, one line */}

       {// This is a block 
        // yoohoo
        // ...
       }

       {/* This is a block 
         yoohoo
         ...
         */
       }
    </p>
  )

}
...

অবৈধ:

...
render() {

  return (
    <p>
       {// This is not a comment! oops! }

       {//
        Invalid comment
       //}
    </p>
  )

}
...

— মেহেদী রশ
সূত্র

10

সংক্ষিপ্তসার হিসাবে, জেএসএক্স এইচটিএমএল-মত বা জেএস-মত মন্তব্যগুলি সমর্থন করে না:

<div>
    /* This will be rendered as text */
    // as well as this
    <!-- While this will cause compilation failure -->
</div>

এবং "জেএসএক্স" এ "মন্তব্য যুক্ত করার একমাত্র উপায় হ'ল আসলে জেএসে পালানো এবং সেখানে মন্তব্য করা:

<div>
    {/* This won't be rendered */}
    {// just be sure that your closing bracket is out of comment
    }
</div>

আপনি কিছু বাজে মত পছন্দ করতে না চান

<div style={{display:'none'}}>
    actually, there are other stupid ways to add "comments"
    but cluttering your DOM is not a good idea
</div>

অবশেষে, আপনি যদি প্রতিক্রিয়ার মাধ্যমে কোনও মন্তব্য নোড তৈরি করতে চান , আপনাকে অনেক ফ্যানসিয়ার যেতে হবে, এই উত্তরটি দেখুন ।

— YakovL
সূত্র

7

অন্যান্য উত্তরগুলির পাশাপাশি, জেএসএক্সের শুরু বা শেষ হওয়ার আগে এবং পরে একক লাইন মন্তব্যগুলি ব্যবহার করাও সম্ভব। এখানে একটি সম্পূর্ণ সারসংক্ষেপ:

বৈধ

(
  // this is a valid comment
  <div>
    ...
  </div>
  // this is also a valid comment
  /* this is also valid */
)

আমরা যদি জেএসএক্স রেন্ডারিং লজিকের ভিতরে মন্তব্যগুলি ব্যবহার করি:

(
  <div>
    {/* <h1>Valid comment</h1> */}
  </div>
)

প্রপস ঘোষণা করার সময় একক লাইনের মন্তব্য ব্যবহার করা যায়:

(
  <div
    className="content" /* valid comment */
    onClick={() => {}} // valid comment
  >
    ...
  </div>
)

অকার্যকর

জেএসএক্সের অভ্যন্তরে একক লাইন বা মাল্টলাইন মন্তব্যগুলি এগুলি মোড়ানো না রেখে { }, মন্তব্যটি ইউআইতে রেন্ডার করা হবে:

(
  <div>
    // invalid comment, renders in the UI
  </div>
)

— দিব্যংশু মাইথানী
সূত্র

4

{ 
    // any valid js expression
}

আপনি যদি ভাবছেন কেন এটি কাজ করে? এর কারণ কারণ কোঁকড়া ধনুর্বন্ধনী inside inside এর ভিতরে থাকা সমস্ত কিছুই জাভাস্ক্রিপ্টের প্রকাশ,

সুতরাং এটিও ঠিক আছে:

{ /*
         yet another js expression
*/ }

— বার হোরিং
সূত্র

{//} এটি কাজ করছে না, আমি পরীক্ষা করে দেখেছি, আপনি কি দয়া করে নির্দিষ্ট করতে পারেন, আমি এটি রেন্ডার ফাংশনের ভিতরে মন্তব্য করার চেষ্টা করছি, এটি কেবল তখনই কাজ করবে যদি কোঁকড়ানো বন্ধনী পরে নতুন লাইন থাকে এবং সমাপ্তি কোঁকড়া ধনুর্বন্ধনী জন্য একই ক্ষেত্রে থাকে (এটি নতুন লাইনে হওয়া উচিত),

— আইবি

4

জেএসএক্স মন্তব্য সিনট্যাক্স: আপনি ব্যবহার করতে পারেন

{/** 
  your comment 
  in multiple lines
  for documentation 
**/}

অথবা

{/* 
  your comment 
  in multiple lines
*/}

একাধিক লাইন মন্তব্য জন্য। এবং যদিও,

{ 
  //your comment 
}

একক লাইন মন্তব্য জন্য।

দ্রষ্টব্য : বাক্য গঠন:
{ //your comment } 
কাজ করে না আপনাকে নতুন লাইনে ধনুর্বন্ধনী টাইপ করতে হবে।

কোঁকড়ানো বন্ধনীগুলি একটি প্রতিক্রিয়া উপাদানটিতে জেএসএক্স এবং জাভাস্ক্রিপ্টের মধ্যে পার্থক্য করতে ব্যবহৃত হয়। কোঁকড়া ধনুর্বন্ধনী ভিতরে, আমরা জাভাস্ক্রিপ্ট মন্তব্য সিনট্যাক্স ব্যবহার।

তথ্যসূত্র: এখানে ক্লিক করুন

— yaksh
সূত্র

আপনি কি নিশ্চিত যে একক লাইন মন্তব্য সিনট্যাক্সটি বৈধ? আপনার রেফারেন্স এটি দেখায় না।

— টম হ্যাবলবাউয়ার

হ্যাঁ. আমি প্রায় নিশ্চিত. আমি এর জন্য কোনও রেফারেন্স খুঁজে পাইনি, তবে আমি নিজে এটি পরীক্ষা করেছি। এছাড়াও, আমি উত্তরে উল্লিখিত হিসাবে, আমরা কোঁকড়া ধনুর্বন্ধনী ব্যবহার করে জেএসএক্সে জাভাস্ক্রিপ্ট একক লাইন সিনট্যাক্স ব্যবহার করতে পারি।

— ইয়াকশ

4

{/*
   <Header />
   <Content />
   <MapList />
   <HelloWorld />
*/}

স্নিপেট প্রসারিত করুন

— হারুন উগুর
সূত্র

4

অফিসিয়াল সাইট অনুযায়ী। এই দুটি উপায়

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

দ্বিতীয় উদাহরণ:

<div>
    {/* It also works 
    for multi-line comments. */}
    Hello, {name}! 
</div>

লিঙ্কটি এখানে: https://reactjs.org/docs/faq-build.html#how-can-i-writ-comments-in-jsx

— ওসভালদো ক্যারিলো
সূত্র

3

নেটিভ প্রতিক্রিয়া মন্তব্য মন্তব্য যুক্ত করার দুটি উপায়

1) // (ডাবল ফরোয়ার্ড স্ল্যাশ) কেবলমাত্র একক লাইন প্রতিক্রিয়া নেটিভ কোডে মন্তব্য করতে ব্যবহৃত হয় তবে এটি কেবল রেন্ডার ব্লকের বাইরে ব্যবহার করা যেতে পারে। আমরা যদি জেএসএক্স ব্যবহার করি যেখানে রেন্ডার ব্লকে মন্তব্য করতে চাইলে আপনার ২ য় পদ্ধতিটি ব্যবহার করা দরকার।

2) আপনি জেএসএক্স-তে কিছু মন্তব্য করতে চাইলে আপনার Java / মন্তব্য এখানে / like মত কোঁকড়ানো ধনুর্বন্ধনী ভিতরে জাভাস্ক্রিপ্ট মন্তব্য ব্যবহার করা প্রয়োজন । এটি একটি নিয়মিত / * ব্লক মন্তব্যসমূহ * /, তবে কোঁকড়া ধনুর্বন্ধনী মধ্যে আবৃত করা প্রয়োজন।

/ * ব্লক করা মন্তব্য * /: এর জন্য শর্টকাট কীগুলি

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

— রমেশ আর
সূত্র

হাই রমেশ আর আপনি যখন কোড সম্পাদনা করছেন তখন আপনি নিশ্চিত করতে পারবেন যে আপনি ইন্ডেন্টেশনটি গোলমাল করবেন না - এই স্ট্যাকওভারফ্লো . com/revisions/57358471/3 এর মতো ? ধন্যবাদ

— ইয়ভেটে

2

জেএসএক্সে জাভাস্ক্রিপ্ট মন্তব্যগুলি পাঠ্য হিসাবে বিশ্লেষণ করে আপনার অ্যাপে প্রদর্শিত হবে।

আপনি কেবল জেএসএক্সের মধ্যে এইচটিএমএল মন্তব্য ব্যবহার করতে পারবেন না কারণ এটি তাদের ডোম নোড হিসাবে বিবেচনা করে:

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

একক লাইন এবং মাল্টলাইন মন্তব্যের জন্য জেএসএক্স মন্তব্যগুলি কনভেনশন অনুসরণ করে

একক লাইন মন্তব্য:

{/* A JSX comment */}

একাধিক মন্তব্য:

{/* 
  Multi
  line
  comment
*/}

— ভেঙ্কটেশ মনোহর
সূত্র

2

প্রতিক্রিয়াটির ডকুমেন্টেশন অনুসারে , আপনি জেএসএক্সে মত মন্তব্য লিখতে পারেন:

এক-লাইন মন্তব্য:

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

মাল্টি-লাইন মন্তব্য:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>

— ম্যানুয়েল অবাসাকাল
সূত্র

ReactJS - মন্তব্যগুলি কীভাবে ব্যবহার করবেন?

বৈধ

অকার্যকর

নেটিভ প্রতিক্রিয়া মন্তব্য মন্তব্য যুক্ত করার দুটি উপায়