Как я могу использовать комментарии внутри 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."
           />
}

Apparantly, когда внутри угловых скобок элемента 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) // (Double Forward Slash) используется для комментирования только одной строки в собственном коде реагирования, но может использоваться только вне блока рендеринга. Если вы хотите оставить комментарий в блоке рендеринга, где мы используем JSX, вам нужно использовать второй метод.

2) Если вы хотите что-то комментировать в JSX, вам нужно использовать комментарии JavaScript внутри фигурных скобок, например {/ comment here /}. Это обычный / * Block Comments * /, но его нужно заключить в фигурные скобки.

сочетания клавиш для / * Блокировать комментарии * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Комментарии JavaScript в JSX анализируются как текстовые и отображаются в вашем приложении.

Вы не можете просто использовать комментарии HTML внутри JSX, потому что они обрабатывают их как узлы DOM:

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>