ReactJS-如何使用注释？

如何在React组件的

render

方法中使用注释

我有以下组件：

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

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

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

“严格使用”；
var React=require（'React'），
按钮=需要（“./按钮”），
无序列表=需要（'./无序列表'）；
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
handleClick（）{
警报（“我正在单击此处”）；
}
render（）{
返回(
//whenClicked本身是一个属性而不是一个事件。
)
}
}
module.exports=下拉列表；

我的评论将显示在UI中

---

在组件的渲染方法中应用单行和多行注释的正确方法是什么？

因此，在

渲染方法中允许注释，但为了在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>


{/*whenClicked本身是属性而不是事件。*/}

您可以阅读更多关于注释如何在JSX中工作的信息，这里有另一种方法，允许您使用
/
包含注释：

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

{/* 
  Multi
  line
  comment
*/}  

因为结束括号
}
被认为是注释的一部分，因此被忽略，这会引发错误。
这就是原因

有效期：

。。。
render（）{
返回(

{/*这是一条注释，一行*/}
{//这是一个街区
//yoohoo
// ...
}
{/*这是一个街区
yoohoo
...
*/
}

)
}
...

无效：

。。。
render（）{
返回(

{//这不是评论！哎呀！}
{//
无效注释
//}

)
}
...
JSX中的JavaScript注释被解析为文本并显示在应用程序中

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

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

多行注释：

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

{/* 
  Multi
  line
  comment
*/}  

另一方面，以下是直接从工作应用程序中提取的有效注释：

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

如果你想知道它为什么起作用？
这是因为大括号{}内的所有内容都是javascript表达式

所以这也很好：

{ /*
         yet another js expression
*/ }

JSX注释语法：
你可以用

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

或

对于多行注释。
而且

{ 
  //your comment 
} 

对于单行注释

注意：语法：

{ //your comment } 

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

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

参考资料：
总而言之，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>


实际上，还有其他愚蠢的方式来添加“评论”
但是把DOM弄得乱七八糟不是个好主意

最后，如果你想通过React创建一个注释节点，你必须更进一步，去看看。
除了其他答案之外，在JSX开始或结束之前和之后也可以使用单行注释。以下是完整的总结：

有效的
(
//这是一个有效的评论
...
//这也是一个有效的评论
/*这也是有效的*/
)

如果我们在JSX呈现逻辑中使用注释：

(
{/*有效注释*/}
)

声明道具时，可以使用单行注释：

(
{}//有效注释
>
...
)

无效的
如果在JSX中使用单行或多行注释而不将它们包装在
{}
中，则注释将呈现到UI：

(
//无效的注释，在UI中呈现
)
在React Native中添加注释的两种方法
1） //（双正斜杠）仅用于注释react本机代码中的单行，但只能在渲染块之外使用。如果要在使用JSX的渲染块中进行注释，则需要使用第二种方法

2） 如果要在JSX中注释某些内容，需要在大括号内使用JavaScript注释，如{/comment here/}。它是一个常规的/*块注释*/，但需要用大括号括起来

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

Ctrl + / on Windows + Linux.

根据，您可以在JSX中写评论，如下所示：

单行评论：

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

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

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


{/*注释位于此处*/}
你好，{name}！

多行评论：

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

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

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


{/*它也起作用
对于多行注释。*/}
你好，{name}！

{/*
*/}
根据官方网站。这是两种方式

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


{/*注释位于此处*/}
你好，{name}！

第二个例子：

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


{/*它也起作用
对于多行注释。*/}
你好，{name}！

以下是链接：
@Lukecaresen它确实有效，因为他将
/
括在方括号中。我不知道为什么，但它总是让我感觉代码不好或代码中有什么错误。换句话说，我的代码中的注释似乎并没有以这种方式进行调整。我不确定我是否使用了双斜杠样式
/
注释，类似{/*comment*/}的东西会产生错误。注释必须在新行中。lol，注释需要用大括号括起来，非常有趣您确定单行注释语法有效吗？你的推荐信没有显示出来。是的。我很肯定。我找不到它的参考资料，但我自己已经测试过了。另外，正如我在回答中提到的，我们可以在JSX中使用javascript单行语法，使用大括号。{/}这不是