Як я можу використовувати коментарі всередині renderметоду в компоненті React?

У мене є такий компонент:

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

Мої коментарі відображаються в інтерфейсі користувача.

Який був би правильний підхід застосовувати одиночні та багаторядкові коментарі всередині методу візуалізації компонента?

Тож у межах 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, ви можете прочитати тут

Ось ще один підхід, який дозволяє використовувати //для включення коментарів:

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}

оскільки кінцева дужка }вважається частиною коментаря і, таким чином, ігнорується, що призводить до помилки.

З іншого боку, наступним є вагомий коментар, витягнутий безпосередньо з робочої програми:

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

Очевидно, що всередині кутових дужок елемента JSX //синтаксис дійсний, але значення {/**/}недійсне. Наступні перерви:

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

Ось як.

Дійсний:

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

}
...

Підводячи підсумок, JSX не підтримує коментарів, як html, так і js:

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

Нарешті, якщо ви хочете створити вузол для коментарів за допомогою React, вам доведеться піти на вигадку, ознайомтеся з цією відповіддю .

Крім інших відповідей, також можна використовувати однорядкові коментарі безпосередньо до і після початку JSX або закінчення. Ось повний підсумок:

Дійсний

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

Недійсний

Якщо ви використовуєте однорядкові або багаторядкові коментарі всередині JSX, не загортаючи їх { }, коментар буде переданий в інтерфейс користувача:

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

За офіційним сайтом. Це два способи

<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

{ 
    // any valid js expression
}

Якщо вам цікаво, чому це працює? це тому, що все, що знаходиться всередині фігурних дужок {}, є виразом javascript,

тож це також добре:

{ /*
         yet another js expression
*/ }

Синтаксис коментарів JSX: Ви можете використовувати

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

або

{/* 
  your comment 
  in multiple lines
*/} 

для коментування декількох рядків І також,

{ 
  //your comment 
} 

для коментаря в одному рядку

Примітка : Синтаксис:

{ //your comment } 

не працює. Потрібно набрати дужки в нових рядках.

Фігурні дужки використовуються для розмежування JSX та JavaScript в компоненті React. Усередині фігурних дужок ми використовуємо синтаксис коментарів JavaScript.

Довідка: натисніть тут

Два способи додати коментарі в React Native

1) // (подвійний нахил вперед) використовується для коментування лише одного рядка в реальному коді реагування, але його можна використовувати тільки поза блоком візуалізації. Якщо ви хочете прокоментувати в блоці візуалізації, де ми використовуємо JSX, вам потрібно скористатися другим методом.

2) Якщо ви хочете щось прокоментувати в JSX, вам потрібно використовувати коментарі JavaScript всередині фігурних брекетів на кшталт {/ коментар тут /}. Це звичайні / * блокові коментарі * /, але їх потрібно загорнути у фігурні дужки.

клавіші швидкого доступу для / * блокувати коментарі * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Коментарі JavaScript у JSX розбираються як Текст та відображаються у вашій програмі.

Ви не можете просто використовувати коментарі HTML всередині JSX, оскільки він трактує їх як DOM Nodes:

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

Зауваження JSX для однорядних та багаторядкових коментарів дотримуються конвенції

Коментар в одному рядку:

{/* A JSX comment */}

Багаторядкові коментарі:

{/* 
  Multi
  line
  comment
*/}  

Відповідно до Документації React , ви можете писати коментарі в JSX так:

Однорядковий коментар:

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

Багаторядкові коментарі:

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