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.
react native 涉及那些标签的都是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.
该规则的例外是您必须记住的内容，因此您不会因⾮常可预防的语法错误⽽意外破坏代码。
react注释

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。