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

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

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 中如何工作的信息here。

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

就是这样。

Valid:

...
render() {

  return (
    <p>
       {/* This is a comment, one line */}

       {// This is a block 
        // yoohoo
        // ...
       }

       {/* This is a block 
         yoohoo
         ...
         */
       }
    </p>
  )

}
...

Invalid:

...
render() {

  return (
    <p>
       {// This is not a comment! oops! }

       {//
        Invalid comment
       //}
    </p>
  )

}
...

Answer 4

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

你不能只在 JSX 中使用 HTML 注释，因为它将它们视为 DOM 个节点：

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

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

单行注释：

{/* A JSX comment */}

多行评论：

{/*
  Multi
  line
  comment
*/}

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

{
    // Any valid JavaScript expression
}

如果您想知道它为什么有效，那是因为花括号 { } 内的所有内容都是 JavaScript 表达式。

所以这也很好:

{ /*
         Yet another JavaScript expression
*/ }

Answer 7

JSX 注释语法： 您可以使用

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

或

{/* 
  your comment 
  in multiple lines
*/}

多行注释。还有，

{ 
  //your comment 
}

用于单行注释。

Note: The syntax:
{ //your comment } 
doesn't work. You need to type braces in new lines.

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

参考：click here

Answer 8

总而言之，JSX 不支持评论，无论是 html-like 还是 js-like：

<div>
    /* This will be rendered as text */
    // as well as this
    <!-- While this will cause compilation failure -->
</div>

和 the only way 在 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 创建一个 评论节点 ，你必须更高级，查看 this answer。

Answer 9

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

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

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

无效

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

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

Answer 10

React Native添加评论的两种方式

//（双正斜杠）用于在 React Native 代码中仅注释单行，但它只能在渲染块之外使用。如果你想在我们使用 JSX 的渲染块中注释，你需要使用第二种方法。
如果你想在 JSX 中注释某些东西，你需要在 curly 大括号内使用 JavaScript 注释，例如 {/* Comment here /}。是一个普通的/块注释*/，但是需要用花括号括起来。

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

Ctrl + / 在 Windows 和 Linux.
Cmd + / 在 macOS 上。

Answer 11

根据React's Documentation，你可以像这样在JSX中写注释：

一行评论：

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

多行注释：

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

Answer 12

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

Answer 13

根据官网，有两种方式：

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

第二个例子：

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

引用如下：How can I write comments in JSX?

Answer 14

条件渲染

on the React docs 提到的这种方法也适用于嵌套的 /**/ 评论，这与 {/**/} 方法不同，例如：

{false && <>
<div>
  Commented out.
  /* Anything goes. */
</div>
</>}

完整示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, World!</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
  <div>
    before
    {false && <>
    <div>
      Commented out.
      /* Anything goes. */
    </div>
    <div>
      Also commented out.
      /* Anything goes. */
    </div>
    </>}
    after
  </div>
  ,
  document.getElementById('root')
);
</script>
</body>
</html>

仅呈现 beforeafter.

如何在 React 中使用注释

How to use comments in React

reactjs

react-native

有效

无效

React Native添加评论的两种方式