如何在 React 中使用注释

Question

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

我的评论显示在 UI 中。

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

原文由 user1177440 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Henrik Andersson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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}

因为右括号 } 被认为是评论的一部分，因此被忽略，从而引发错误。

原文由 anandharshan 发布，翻译遵循 CC BY-SA 3.0 许可协议