Ответ 1

Таким образом, в методе 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

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

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}

потому что закрывающая скобка } считается частью комментария и игнорируется, что вызывает ошибку.

Ответ 3

С другой стороны, ниже приведен действительный комментарий, полученный непосредственно из рабочего приложения:

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."
           />
}

Ответ 4

Вот как это сделать.

Действителен:

...
render() {

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

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

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

}
...

Invalid:

...
render() {

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

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

}
...

Ответ 5

Подводя итог, 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, вам нужно пойти намного дальше, посмотрите этот ответ.

Ответ 6

Синтаксис комментариев JSX: Вы можете использовать

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

или же

{/* 
  your comment 
  in multiple lines
*/} 

для многострочного комментария. А также,

{ 
  //your comment 
} 

для однострочного комментария.

Примечание: синтаксис:

{ //your comment } 

не работает Вам нужно ввести фигурные скобки в новых строках.

Фигурные скобки используются для различения JSX и JavaScript в компоненте React. Внутри фигурных скобок мы используем синтаксис комментариев JavaScript.

Ссылка: нажмите здесь

Ответ 7

{ 
    // any valid js expression
}

Если вам интересно, почему это работает? это потому, что все, что внутри фигурных скобок {} является выражением JavaScript,

так что это тоже хорошо

{ /*
         yet another js expression
*/ }

Ответ 8

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

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

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

Комментарии JSX для однострочных и многострочных комментариев следуют соглашению

Однострочный комментарий:

{/* A JSX comment */}

Многострочные комментарии:

{/* 
  Multi
  line
  comment
*/}  

Ответ 9

Помимо других ответов, также возможно использовать однострочные комментарии непосредственно до и после того, как 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>
)

Ответ 10

Согласно React Documentation, вы можете писать комментарии в JSX следующим образом:

Комментарий в одну строку:

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

Многострочные комментарии:

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

Ответ 11

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

1)//(Double Forward Slash) используется для комментирования только одной строки в собственном коде реагирования, но может использоваться только вне блока рендеринга. Если вы хотите оставить комментарий в блоке рендеринга, где мы используем JSX, вам нужно использовать второй метод.

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

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

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Ответ 12

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