如何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 创建一个comment节点，则必须花很多精力，请查看此答案。

除了其他答案，还可以在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中使用单行或多行注释而不将其包装在时{ }，注释将呈现到UI：

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

{ 
    // 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 } 

不起作用。您需要在新行中输入大括号。

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

参考：点击这里

根据官方网站。这是两种方式

<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

在React Native中添加注释的两种方法

1）//（双正斜杠）用于在react native代码中仅注释单行，但只能在render块之外使用。如果要在我们使用JSX的渲染块中进行注释，则需要使用2nd方法。

2）如果您想在JSX中添加注释，则需要在Curly花括号内使用JavaScript注释，例如{/ comment here /}。这是一个常规的/ *块注释* /，但需要用大括号括起来。

/ *块注释* /的快捷键：

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

JSX中的JavaScript注释将解析为文本并显示在您的应用中。

您不能只在JSX内使用HTML注释，因为它将HTML注释视为DOM节点：

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

单行和多行注释的JSX注释遵循约定

单行注释：

{/* A JSX comment */}

多行注释：

{/* 
  Multi
  line
  comment
*/}  

根据React的Documentation，您可以像这样在JSX中编写注释：

单行注释：

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

多行注释：

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