Bagaimana saya bisa menggunakan komentar di dalam rendermetode dalam komponen Bereaksi?

Saya memiliki komponen berikut:

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

Komentar saya muncul di UI.

Apa yang akan menjadi pendekatan yang tepat untuk menerapkan komentar baris tunggal dan ganda di dalam metode render komponen?

Jadi di dalam rendermetode, komentar diperbolehkan tetapi untuk menggunakannya dalam JSX, Anda harus membungkusnya dengan kawat gigi dan menggunakan komentar gaya multi-line.

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

Anda dapat membaca lebih lanjut tentang cara kerja komentar di BEJ di sini

Berikut adalah pendekatan lain yang memungkinkan Anda untuk menggunakan //untuk memasukkan komentar:

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

Tangkapannya di sini adalah Anda tidak dapat memasukkan komentar satu baris menggunakan pendekatan ini. Misalnya, ini tidak berfungsi:

{// your comment cannot be like this}

karena braket penutup }dianggap sebagai bagian dari komentar dan karenanya diabaikan, yang menimbulkan kesalahan.

Di sisi lain, berikut ini adalah komentar yang valid, ditarik langsung dari aplikasi yang berfungsi:

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

Tampaknya, ketika di dalam kurung sudut elemen JSX, //sintaksnya valid, tetapi {/**/}tidak valid. Istirahat berikut:

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

Begini caranya.

Sah:

...
render() {

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

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

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

}
...

Tidak valid:

...
render() {

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

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

}
...

Untuk meringkas, JSX tidak mendukung komentar, baik seperti html atau seperti js:

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

dan satu-satunya cara untuk menambahkan komentar "di" JSX sebenarnya untuk melarikan diri ke JS dan berkomentar di sana:

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

jika Anda tidak ingin membuat omong kosong seperti

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

Akhirnya, jika Anda ingin membuat simpul komentar melalui Bereaksi, Anda harus menjadi jauh lebih menarik, periksa jawaban ini .

Selain jawaban lain, dimungkinkan juga untuk menggunakan komentar satu baris sebelum dan sesudah JSX dimulai atau berakhir. Berikut ini ringkasan lengkapnya:

Sah

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

Jika kami menggunakan komentar di dalam logika rendering JSX:

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

Saat mendeklarasikan alat peraga, komentar satu baris dapat digunakan:

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

Tidak valid

Saat menggunakan satu baris atau komentar multiline di dalam BEJ tanpa membungkusnya { }, komentar akan diberikan ke UI:

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

Menurut situs resmi. Ini adalah dua cara

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

Contoh kedua:

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

Berikut tautannya: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Jika Anda bertanya-tanya mengapa itu berhasil? itu karena semua yang ada di dalam kurung kurawal {} adalah ekspresi javascript,

jadi ini juga baik:

{ /*
         yet another js expression
*/ }

Sintaks Komentar JSX: Anda dapat menggunakan

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

atau

{/* 
  your comment 
  in multiple lines
*/} 

untuk komentar beberapa baris. Dan juga,

{ 
  //your comment 
} 

untuk komentar satu baris.

Catatan : Sintaksnya:

{ //your comment } 

tidak bekerja Anda harus mengetikkan kawat gigi di baris baru.

Kurung kurawal digunakan untuk membedakan antara JSX dan JavaScript dalam komponen Bereaksi. Di dalam kurung kurawal, kami menggunakan sintaks komentar JavaScript.

Referensi: klik di sini

Dua Cara untuk Menambahkan Komentar di Bereaksi Asli

1) // (Double Forward Slash) digunakan untuk mengomentari hanya satu baris dalam kode asli reaksi tetapi hanya dapat digunakan di luar blok render. Jika Anda ingin mengomentari dalam render blok tempat kami menggunakan JSX Anda perlu menggunakan metode ke-2.

2) Jika Anda ingin mengomentari sesuatu di BEJ Anda perlu menggunakan komentar JavaScript di dalam kurung kurawal seperti {/ komentar di sini /}. Ini adalah / * Komentar Blok biasa * /, tetapi harus dibungkus dengan kurung kurawal.

tombol pintas untuk / * Blokir Komentar * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Komentar JavaScript dalam JSX diuraikan sebagai Teks dan muncul di aplikasi Anda.

Anda tidak bisa hanya menggunakan komentar HTML di dalam JSX karena memperlakukannya sebagai DOM Nodes:

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

Komentar BEJ untuk satu baris dan komentar multiline mengikuti konvensi

Komentar satu baris:

{/* A JSX comment */}

Komentar multiline:

{/* 
  Multi
  line
  comment
*/}  

Menurut React's Documentation , Anda dapat menulis komentar di BEJ seperti:

Komentar Satu Baris:

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

Komentar Multi-baris:

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