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; 

我的意见显示在用户界面。

什么是正确的方式来处理意见？

更新：

感谢limelights这工作：

  {/* whenClicked is a property not an event, per se. */} 

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如何使用注释的知识

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} 

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

Answer 3

这是如何。

有效：

 ... 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> ) } ...