这就是方法。

有效:

...
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中使用它们，必须将它们括在大括号中并使用多行风格的注释。

<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中注释如何工作的信息。

JSX注释语法: 你可以使用

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

or

{/* 
  your comment 
  in multiple lines
*/} 

对于多行注释。 而且,

{ 
  //your comment 
} 

对于单行注释。

注意:语法: {//你的评论} 是行不通的。你需要在新行中输入大括号。

花括号用于在React组件中区分JSX和JavaScript。 在花括号内，我们使用JavaScript注释语法。

参考资料:按此处

{/ * <标题- > <内容- > < MapList - > < HelloWorld - > * /}

除了其他答案，还可以在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>
)

在声明props时，可以使用单行注释:

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

无效的

当在JSX中使用单行或多行注释而不使用{}包装它们时，注释将被呈现给UI:

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

下面是另一种允许你使用//来包含注释的方法:

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}

因为右括号}被认为是注释的一部分，因此被忽略，这会抛出一个错误。