react注释_React的不同注释语法

react注释

Recently I tried to comment a line in my ReactNative application, and the comment broke it. I was confused because I used the Mac shortcut for commenting a line cmd + /, so I assumed VS Code would format it properly for me considering I have the language set to React. Why didn’t it work?

最近，我试图在我的ReactNative应用程序中注释一行，但注释使它破了。 我很困惑，因为我使用Mac快捷方式注释了cmd + / ，因此考虑到我将语言设置为React，我以为VS Code会为我正确格式化它。 为什么不起作用？

React的语法 (React’s Syntaxes)

React has a few different ways to go about writing comments in your code. These are not all interchangeable either. One legitimate comment in one part of your code might break in another part. Most of it depends on whether the comment comes amongst Javascript code or JSX code.

React有几种不同的方式可以在代码中编写注释。 这些也不都是可以互换的。 在代码的一部分中的一个合法注释可能会在另一部分中中断。 这主要取决于注释是Java代码还是JSX代码。

带有斜线和星号的花括号 (Curly Braces with Slash and Asterisks)

Within JSX code (between tags <>), curly braces {} are required to add comments. There are a few different ways we can use curly braces to add comments in our JSX code. We can sandwich our comments between a curly brace, slash, and asterisk sandwich.

在JSX代码中(标记<> 之间 )，需要使用花括号{}来添加注释。 我们可以使用花括号在JSX代码中添加注释的方式有几种。 我们可以将我们的注释夹在大括号，斜杠和星号三明治之间。

Why does this work and why do the curly braces seem to be outside the comment based on the syntax highlight? In JSX code, we can still use Javascript, but we have to do it inside curly braces. Essentially the curly braces just say, “whatever’s in between us should be read as Javascript and not JSX.” The slash-asterisk sandwich is classic Javascript comment syntax that can be used for single line or multi-line comments.

为什么这样做有效，以及为什么基于语法高亮显示花括号似乎不在注释之外？ 在JSX代码中，我们仍然可以使用Javascript，但是必须在花括号内使用它。 本质上，花括号只是说：“我们之间的所有内容都应阅读为Javascript，而不是JSX。” 斜线-星号三明治是经典的Javascript注释语法，可用于单行或多行注释。

The slash-asterisk sandwich /* */ isn’t the only Javascript comment syntax we can use in our React app.

斜线星号/* */并不是我们可以在React应用程序中使用的唯一Javascript注释语法。

双斜杠花括号 (Curly Braces with Double Slash)

We can also use the Javascript single line comment syntax that starts with a double slash //. We have to be a bit careful using this syntax, because it has the power to comment out the closing curly brace } that ends our Javascript expression. This will break our code.

我们还可以使用以双斜杠//开头的Javascript单行注释语法。 我们必须谨慎使用此语法，因为它可以注释掉结束Javascript表达式的右花括号} 。 这将破坏我们的代码。

The other comment works fine all on one line, because the closing asterisk and slash */ tell the program that whatever comes next is outside the comment. The double slash comment works by telling the app that everything on the line afterwards is a comment. Therefore, if the closing curly bracket appears on the same line as the double slash //, the app doesn’t register that it has closed the Javascript expression. The app will break on a syntax error.

另一条注释在一行上都可以正常工作，因为结尾的星号和斜杠*/告诉程序接下来的内容不在注释之内。 通过告诉应用程序此行之后的所有内容均为注释，可以使用双斜杠注释。 因此，如果右花括号与双斜杠//出现在同一行，则该应用不会注册为已关闭Javascript表达式。 该应用程序将因语法错误而中断。

If you want to use the single line comment syntax over the multi-line, there’s still a simple way to do it. Since the double slash // comments out the rest of the line, we have to put the closing curly bracket } on the next line.

如果要在多行上使用单行注释语法，则仍然有一种简单的方法。 由于双斜杠//注释掉了该行的其余部分，因此我们必须在下一行放置右花括号} 。

But it could look better

但是看起来会更好

If you want to use the single line comment syntax, I’d highly recommend putting it on its own line in between the curly braces just for readability.

如果要使用单行注释语法，我强烈建议您将其放在花括号之间的一行上，以提高可读性。

没有花括号 (Without Curly Braces)

Outside of our JSX code in a React app, Javascript is the default. Therefore, we can write our comments using the syntaxes just mentioned, but without the curly braces.

在React应用程序的JSX代码之外，Javascript是默认的。 因此，我们可以使用刚才提到的语法来编写注释，但不要使用花括号。

用例和警告 (Use Cases and the Caveat)

Now that we know how to write the different comment syntaxes, it’s time to go over when to use what. While we went over multiple ways to write these comments, we really only need to consider one thing: do we need curly braces or not? It’s pretty simple outside of one caveat, which I’ll go over in a sec.

现在我们知道了如何编写不同的注释语法，是时候回顾一下什么时候使用什么了。 尽管我们通过多种方式来编写这些注释，但实际上我们只需要考虑一件事：是否需要花括号？ 除了一个警告之外，这非常简单，我将在几秒钟后进行介绍。

规则 (The Rule)

If you’re within JSX code and between tags, you need curly brackets. Otherwise you don’t. Here’s what JSX looks like.

如果您在 JSX代码内并且在标签之间 ，则需要大括号。 否则，您不会。 这就是JSX的样子。

Anything involving those tags is JSX, so in order to add a comment within those JSX tags we have to use curly braces.

涉及那些标签的都是JSX，因此为了在这些JSX标签中添加注释，我们必须使用花括号。

It gets slightly more confusing when these JSX tags become nested within each other. This is the norm, so you’ll see this all the time.

当这些JSX标签相互嵌套时，会变得更加混乱。 这是规范，所以您会一直看到。

You would need to use the curly braces to comment out anything that comes between your parent tags, which are the <TouchableOpacity></TouchableOpacity> tags in the picture above. However, you’ll have a syntax error if you use the curly braces anywhere just outside the JSX parent tags.

您需要使用花括号将父标记之间的所有内容注释掉，这些标记是上图中的<TouchableOpacity></TouchableOpacity>标记。 但是，如果在JSX父标记之外的任何地方使用花括号，则会出现语法错误。

curly braces only work WITHIN JSX tags

花括号仅在JSX标签内起作用

例外 (The Exception)

Now that we know the main rule for using curly braces, it’s time for the exception to the rule. We can’t use the bracket comments inside JSX tags. That sounds really confusing. I just told you that you must use curly braces for comments within JSX code, but not inside JSX tags. Here’s a single JSX opening View tag with a style prop:

现在我们知道了使用花括号的主要规则，是时候该规则例外了。 我们不能在 JSX标签中使用方括号注释。 这听起来真令人困惑。 我刚刚告诉过您，必须在JSX代码中使用大括号来注释，而不是在 JSX 标签中 。 这是一个带有样式道具的JSX开放View标签：

It is common for JSX elements to have props. Some elements have multiple props, and you might want to comment out one of these props or include a comment among them. Since these props are inside the JSX tag, we can’t use the curly brace comments. Here we must use the plain Javascript comments.

JSX元素通常具有道具。 有些元素具有多个道具，您可能要注释掉其中一个道具或在其中添加注释。 由于这些道具位于 JSX标签内，因此我们不能使用花括号注释。 在这里，我们必须使用普通的Javascript注释。

It gets especially confusing because your code editor might trip you up if you comment with keyboard shortcuts like I do. In every other scenario in my React app, VS Code formats my comments correctly when I use the line comment keyboard shortcut. Between JSX tags, it comments with curly braces; outside the JSX tags, it comments without curly braces just like it should. But when I use the keyboard shortcut inside a JSX tag, it comments with curly braces and breaks my code.

这尤其令人困惑，因为如果您像我一样用键盘快捷键进行注释，您的代码编辑器可能会使您绊倒。 在我的React应用程序中的所有其他情况下，当我使用行注释键盘快捷键时，VS Code都会正确格式化我的注释。 在JSX标签之间，它用花括号注释； 在JSX标记之外，它像注释一样没有大括号就注释了。 但是，当我在 JSX标签中使用键盘快捷键时，它会用花括号注释并破坏我的代码。

The exception to the rule is what you must remember, so you don’t accidentally break your code with a very preventable syntax error.

该规则的例外是您必须记住的内容，因此您不会因非常可预防的语法错误而意外破坏代码。

翻译自: https://medium.com/dev-genius/the-different-comment-syntaxes-of-react-1ee67f909762

react注释