189

मैं 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;

यहां छवि विवरण दर्ज करें

मेरी टिप्पणियाँ UI में दिखाई दे रही हैं।

किसी घटक के रेंडर विधि के अंदर सिंगल और मल्टीपल लाइन कमेंट्स को लागू करने के लिए सही तरीका क्या होगा?

reactjs react-native

— meDeepakJain
स्रोत

3

एकल उत्तर के साथ अच्छा प्रश्न। 12 उत्तरों से मूर्ख मत बनो! वे सभी एक ही चीज़ के बारे में बात करते हैं:{/* JSX comment*/}

— जैक मिलर

272

तो renderविधि टिप्पणियों के भीतर अनुमति दी जाती है, लेकिन JSX के भीतर उनका उपयोग करने के लिए, आपको उन्हें ब्रेसिज़ में लपेटना होगा और बहु-पंक्ति शैली टिप्पणियों का उपयोग करना होगा।

<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> {/ * टिप्पणी * /} त्रुटि पैदा करता है। टिप्पणी एक नई पंक्ति में होनी चाहिए।

— अमीर शबानी

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

@LukeCarelsen यह वास्तव में काम करता है क्योंकि उन्होंने //वर्ग कोष्ठक में संलग्न किया था।

— मार्टिन डॉसन

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

संक्षेप में, JSX टिप्पणियों का समर्थन नहीं करता है, या तो html-like या js-like:

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

और "JSX में टिप्पणी" जोड़ने का एकमात्र तरीका वास्तव में JS में बचना और उसमें टिप्पणी करना है:

<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 */
)

यदि हम JSX प्रतिपादन तर्क के अंदर टिप्पणियों का उपयोग करने के लिए थे:

(
  <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
}

यदि आप आश्चर्य करते हैं कि यह काम क्यों करता है? ऐसा इसलिए है क्योंकि सब कुछ जो घुंघराले ब्रेस के अंदर है {} एक जावास्क्रिप्ट अभिव्यक्ति है,

तो यह ठीक है:

{ /*
         yet another js expression
*/ }

— बार किराए पर लेना
स्रोत

{//} यह काम नहीं कर रहा है, मैंने जांच की है, क्या आप कृपया निर्दिष्ट कर सकते हैं, मैं इसे रेंडर फ़ंक्शन के अंदर टिप्पणी करने की कोशिश कर रहा हूं, यह केवल तभी काम करता है जब घुंघराले ब्रेस के बाद नई लाइन होती है और समापन घुंघराले ब्रेस के लिए एक ही मामला होता है (यह नई लाइन पर होना चाहिए),

— आईबी

4

JSX टिप्पणियाँ सिंटैक्स: आप उपयोग कर सकते हैं

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

या

{/* 
  your comment 
  in multiple lines
*/}

कई लाइनों टिप्पणी के लिए। और भी,

{ 
  //your comment 
}

सिंगल लाइन टिप्पणी के लिए।

नोट : वाक्य रचना:
{ //your comment } 
काम नहीं करता है। आपको नई लाइनों में ब्रेसिज़ टाइप करने की आवश्यकता है।

घुंघराले ब्रेसिज़ का उपयोग एक प्रतिक्रियाशील घटक में JSX और जावास्क्रिप्ट के बीच अंतर करने के लिए किया जाता है। घुंघराले ब्रेसिज़ के अंदर, हम जावास्क्रिप्ट टिप्पणी वाक्यविन्यास का उपयोग करते हैं।

संदर्भ: यहां क्लिक करें

— yaksh
स्रोत

क्या आप सुनिश्चित हैं कि एकल पंक्ति टिप्पणी वाक्यविन्यास मान्य है? आपका संदर्भ यह नहीं दिखाता है।

— टॉम हबलबॉयर

हाँ। मुजे पुरा यकीन है। मुझे इसके लिए कोई संदर्भ नहीं मिला, लेकिन मैंने खुद इसका परीक्षण किया है। इसके अलावा, जैसा कि मैंने उत्तर में उल्लेख किया है, हम घुंघराले ब्रेसिज़ का उपयोग करके JSX में जावास्क्रिप्ट सिंगल लाइन सिंटैक्स का उपयोग कर सकते हैं।

— यक्ष

4

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

स्निपेट का विस्तार करें

— harun ugur
स्रोत

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-write-comments-in-jsx

— ओस्वाल्डो कारिलो
स्रोत

3

रिएक्टिव नेटिव में टिप्पणियाँ जोड़ने के दो तरीके

1) // (डबल फॉरवर्ड स्लैश) का उपयोग केवल एक लाइन को प्रतिक्रिया देने के लिए किया जाता है, जो कि देशी कोड में होती है, लेकिन इसे केवल रेंडर ब्लॉक के बाहर ही उपयोग किया जा सकता है। यदि आप रेंडर ब्लॉक में टिप्पणी करना चाहते हैं जहां हम JSX का उपयोग करते हैं तो आपको दूसरी विधि का उपयोग करने की आवश्यकता है।

2) यदि आप JSX में कुछ टिप्पणी करना चाहते हैं तो आपको घुंघराले ब्रेस के अंदर जावास्क्रिप्ट टिप्पणियों का उपयोग करना होगा जैसे {/ टिप्पणी यहाँ /}। यह एक नियमित / * ब्लॉक टिप्पणियाँ * / है, लेकिन घुंघराले ब्रेसिज़ में लपेटने की आवश्यकता है।

/ * ब्लॉक टिप्पणियाँ के लिए शॉर्टकट कुंजी * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

— रमेश आर
स्रोत

जब आप कोड संपादन कर रहे हैं, तो हाय रमेश आर आप सुनिश्चित कर सकते हैं कि आप इंडेंटेशन को गड़बड़ नहीं करते हैं - जैसे कि इस stackoverflow.com/revisions/57358471/3 ? धन्यवाद

— युवेट

2

JSX में जावास्क्रिप्ट टिप्पणियाँ टेक्स्ट के रूप में पार्स हो जाती हैं और आपके ऐप में दिखाई देती हैं।

आप बस JSX के अंदर HTML टिप्पणियों का उपयोग नहीं कर सकते क्योंकि यह उन्हें DOM नोड्स के रूप में मानता है:

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

एकल लाइन और बहुस्तरीय टिप्पणियों के लिए JSX टिप्पणियाँ सम्मेलन का अनुसरण करता है

एकल पंक्ति टिप्पणी:

{/* A JSX comment */}

बहुस्तरीय टिप्पणियां:

{/* 
  Multi
  line
  comment
*/}

— वेंकटेश मनोहर
स्रोत

2

रिएक्ट के डॉक्यूमेंटेशन के अनुसार , आप JSX में टिप्पणी लिख सकते हैं :

एक-पंक्ति टिप्पणी:

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

बहु-पंक्ति टिप्पणियाँ:

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

— मैनुअल एबस्कल
स्रोत

ReactJS - टिप्पणियों का उपयोग कैसे करें?

मान्य

अमान्य

रिएक्टिव नेटिव में टिप्पणियाँ जोड़ने के दो तरीके