ReactJS - 如何使用评论

Question

你能否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;  

我的评论显示在用户界面中.

处理评论的正确方法是什么？

更新:

谢天谢地,这有效:

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

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

除了其他答案之外，还可以在 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>
)

声明 props 时可以使用单行注释：

(
  <div
    className="content" /* valid comment */
    onClick={() => {}} // valid comment
  >
    ...
  </div>
)

无效的

当在 JSX 中使用单行或多行注释而不将它们包装在 中时{ }，注释将呈现到 UI：

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

Answer 4

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

<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

Answer 5

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

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

Answer 6

React Native 添加注释的两种方式

1) // (Double Forward Slash) 用于在 React Native 代码中仅注释一行，但只能在渲染块之外使用。如果你想在我们使用 JSX 的渲染块中注释你需要使用第二种方法。

2) 如果你想在 JSX 中注释一些东西，你需要在花括号内使用 JavaScript 注释，比如 {/ comment here /}。它是一个常规的 /* Block Comments */，但需要用花括号括起来。

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

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Answer 7

{/*
   <Header />
   <Content />
   <MapList />
   <HelloWorld />
*/}

Answer 8

这是怎么回事.

有效:

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

}
...

Answer 9

{ 
    // any valid js expression
}

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

所以这也很好：

{ /*
         yet another js expression
*/ }

Answer 10

JSX 注释语法： 您可以使用

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

或者

{/* 
  your comment 
  in multiple lines
*/} 

对于多行注释。并且，

{ 
  //your comment 
} 

用于单行注释。

注意：语法：

{ //your comment } 

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

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

参考资料：点此

Answer 11

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

单行评论：

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

多行注释：

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

Answer 12

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

你不能只在 JSX 中使用 HTML 注释，因为它把它们当作 DOM 节点：

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

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

单行注释：

{/* A JSX comment */}

多行注释：

{/* 
  Multi
  line
  comment
*/}  

Answer 13

总而言之，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节点，则必须花很多精力，请查看此答案。