在React Native中添加注释的两种方法

Question

您是否可以在React组件的<?php use kartik\datetime\DateTimePicker; echo '<label>Start Date/Time</label>'; echo DateTimePicker::widget([ 'name' => 'startdatetime', 'options' => ['placeholder' => 'Select operating time ...'], 'convertFormat' => true, 'pluginOptions' => [ 'format' => 'd-M-Y g:i A', 'startDate' => '01-Mar-2014 12:00 AM', 'todayHighlight' => true ] ]); ?>方法中使用注释？

我有以下组件：

render

enter image description here

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

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

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

这是怎么做的。

有效：

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

另一方面，以下是有效的评论，直接从工作申请中提取：

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 5

JSX注释语法： 您可以使用

baseUrl

或

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

用于多行注释。还有，

{/* 
  your comment 
  in multiple lines
*/}

用于单行注释。

注意：语法：
{ 
  //your comment 
} 
不起作用。您需要在新行中输入大括号。

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

参考：click here

Answer 6

总而言之，JSX不支持类似于html或类似js的注释：

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

{ 
    // any valid js expression
}

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

所以这也很好：

{ /*
         yet another js expression
*/ }

Answer 8

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

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

JSX对单行和多行注释的评论遵循惯例

单行评论：

Bar

多行评论：

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

Answer 9

在React Native中添加注释的两种方法

1）//（双正斜杠）用于在react native代码中仅注释单行，但只能在render块之外使用。如果要在我们使用JSX的渲染块中进行注释，则需要使用第二种方法。

2）如果您想在JSX中注释某些内容，则需要在{{<< em> comment here /}之类的Curly括号内使用JavaScript注释。这是一个普通的/ *块注释* /，但需要用大括号括起来。

/ p块注释的快捷键* /：

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Answer 10

根据 React's Documentation ，您可以在 JSX 中编写注释，如下所示：

单行注释：

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

多行注释：

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

Answer 11

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

Answer 12

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

<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 13

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

条件渲染

与 /**/ 方法不同，https://reactjs.org/docs/conditional-rendering.html 中一般提到的这种方法也适用于嵌套的 {/**/} 注释，例如：

{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。

ReactJS - 如何使用评论

14 个答案:

在React Native中添加注释的两种方法

有效

无效