如何在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;

我的评论显示在UI中。

在组件的呈现方法中应用单行和多行注释的正确方法是什么?


当前回答

另一方面,下面是一个有效的注释,直接从一个工作的应用程序:

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

其他回答

JSX注释语法: 你可以使用

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

or

{/* 
  your comment 
  in multiple lines
*/} 

对于多行注释。 而且,

{ 
  //your comment 
} 

对于单行注释。

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

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

参考资料:按此处

根据官方网站,这是两种方式:

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

第二个例子:

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

参考资料如下:如何在JSX中编写注释?

根据React的文档,你可以像这样在JSX中编写注释:

单行注释:

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

多行注释:

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

在呈现方法中允许使用注释,但是为了在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}

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