renderBir React bileşenindeki yöntemin içindeki yorumları nasıl kullanabilirim ?

Aşağıdaki bileşen var:

'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;  

Yorumlarım kullanıcı arayüzünde görünüyor.

Bir bileşenin oluşturma yönteminde tek ve çok satırlı yorumları uygulamak için doğru yaklaşım ne olabilir?

Bu yüzden renderyöntem içinde yorumlara izin verilir, ancak JSX içinde kullanmak için bunları parantez içine almanız ve çok satırlı stil yorumlarını kullanmanız gerekir.

<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'te yorumların nasıl çalıştığı hakkında daha fazla bilgiyi buradan edinebilirsiniz.

//Yorum eklemek için kullanmanıza izin veren başka bir yaklaşım :

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

Buradaki yakalama, bu yaklaşımı kullanarak tek satırlık bir yorum ekleyemeyeceğinizdir. Örneğin, bu çalışmaz:

{// your comment cannot be like this}

çünkü kapanış ayracı }yorumun bir parçası olarak kabul edilir ve bu nedenle yok sayılır, bu da bir hata atar.

Öte yandan, doğrudan çalışan bir uygulamadan alınan geçerli bir yorum aşağıdadır:

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

Anlaşılan, ne zaman içeride bir JSX elemanının açılı ayraçlar, //sözdizimi geçerli, ancak {/**/}geçersiz. Aşağıdaki molalar:

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

Bu nasıl.

Geçerli:

...
render() {

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

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

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

}
...

Geçersiz:

...
render() {

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

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

}
...

Özetlemek gerekirse, JSX html benzeri veya js benzeri yorumları desteklemez:

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

ve JSX'e "" eklemenin tek yolu aslında JS'ye kaçmak ve oraya yorum yapmaktır:

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

böyle saçma sapan yapmak istemiyorsan

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

Son olarak, React aracılığıyla bir yorum düğümü oluşturmak istiyorsanız, çok daha meraklı olmalısınız, bu cevaba göz atın .

Diğer cevapların yanı sıra, JSX başlamadan veya bitmeden hemen önce ve sonra tek satırlık yorumlar kullanmak da mümkündür. İşte tam bir özet:

Geçerli

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

JSX oluşturma mantığının içindeki yorumları kullanırsak:

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

Sahne bildirimi yapılırken tek satırlı yorumlar kullanılabilir:

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

Geçersiz

JSX'in içine sarmadan tek satırlı veya çok satırlı yorumlar kullanıldığında { }, yorum kullanıcı arayüzüne gönderilir:

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

Resmi siteye göre. Bunlar iki yol

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

İkinci Örnek:

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

İşte bağlantı: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Neden işe yaradığını merak ediyorsanız? çünkü {} kıvırcık parantez içindeki her şey bir javascript ifadesidir,

yani bu da iyi:

{ /*
         yet another js expression
*/ }

JSX Yorumlar Sözdizimi: Kullanabilirsiniz

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

veya

{/* 
  your comment 
  in multiple lines
*/} 

birden fazla satır için yorum. Ve ayrıca,

{ 
  //your comment 
} 

tek satır yorum için.

Not : Sözdizimi:

{ //your comment } 

çalışmıyor. Yeni satırlara kaşlı ayraçlar yazmanız gerekir.

Kıvrık ayraçlar, React bileşenindeki JSX ve JavaScript'i ayırmak için kullanılır. Kıvırcık parantezlerin içinde JavaScript yorum sözdizimini kullanıyoruz.

Referans: buraya tıklayın

React Native'e Yorum Eklemenin İki Yolu

1) // (Çift İleri Eğik Çizgi), tepki yerel kodundaki yalnızca tek bir satırı yorumlamak için kullanılır, ancak yalnızca oluşturma bloğunun dışında kullanılabilir. JSX kullandığımız render bloğunda yorum yapmak isterseniz 2. yöntemi kullanmanız gerekir.

2) JSX'te bir şey yorum yapmak istiyorsanız, {/ comment here /} gibi Kıvırcık parantezlerin içindeki JavaScript yorumlarını kullanmanız gerekir . Bu düzenli bir / * Blok Yorumları * /, ancak kıvırcık parantez içine sarılması gerekir.

/ * Blok Yorumları * / için kısayol tuşları:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

JSX'teki JavaScript yorumları Metin olarak ayrıştırılır ve uygulamanızda gösterilir.

HTML yorumlarını JSX'in içinde kullanamazsınız, çünkü DOM Düğümleri olarak değerlendirir:

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

Sözleşmeyi tek satır ve çok satırlı yorumlar için JSX yorumları

Tek satır yorum:

{/* A JSX comment */}

Çok satırlı yorumlar:

{/* 
  Multi
  line
  comment
*/}  

Göre belgelerine Tepki , içeri yorum yazabilirsiniz JSX şöyle:

Tek satırlık Yorum:

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

Çok Satırlı Yorumlar:

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