如何在React中使用注释

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

Enter image description here

我的评论显示在UI中。

在组件的呈现方法中应用单行和多行注释的正确方法是什么?

275703 次浏览
小开
最佳答案

在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 在这里中的注释是如何工作的。

小开

下面是另一种允许你使用//来包含注释的方法:

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}

因为右括号}被认为是注释的一部分，因此被忽略，从而抛出错误。

小开

这就是方法。

有效:

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


}
...
小开

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

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

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

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

单行注释:

{/* A JSX comment */}

多行注释:

{/*
Multi
line
comment
*/}
小开

另一方面，下面是一个有效的注释，直接从一个工作的应用程序:

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."
/>
}
小开 
{
// Any valid JavaScript expression
}

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

所以这也很好:

{ /*
Yet another JavaScript expression
*/ }
小开

JSX注释语法: 你可以使用

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

或

{/*
your comment
in multiple lines
*/}

为多行注释。 而且,< / p > 

{
//your comment
}

对于单行注释。

请注意:语法:

{ //your comment }

是行不通的。你需要在新行中输入大括号。

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

参考:点击这里

小开

概括地说，JSX不支持注释，不管是html类的还是js类的:

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

和唯一的办法添加注释" inquot;JSX实际上是escape到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创建一个注释节点，你必须更加花哨，检查这个答案。

小开

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

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

  1. //(双正斜杠)用于在React Native代码中只注释一行，但它只能在渲染块之外使用。如果您想在我们使用JSX的呈现块中注释，则需要使用第二种方法。

  2. 如果你想在JSX中评论某些东西，你需要在卷曲的花括号内使用JavaScript注释，如{/* comment here /}。它是一个普通的/ Block comment */，但它需要用花括号包装。

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

  • Ctrl + /在Windows和Linux上。

  • 在macOS上

    Cmd + /。

小开

根据React的文档，你可以在JSX中像这样写注释:

单行注释:

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

多行注释:

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

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

小开

根据官方网站，这是两种方式:

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

第二个例子:

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

这里是引用:如何在JSX中写注释?< / >

小开

有条件的呈现

上面提到的在React文档中方法也适用于嵌套的/**/注释，与{/**/}方法不同，例如:

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

啊，刚刚注意到，这样做的一个缺点是typescript之类的linter可能会抱怨“comment”中的内容。这是不对的。

小开

下面是React中注释的6种方式:

  1. 多行TypeScript注释 .
  2. HTML属性评论 .
  3. 单行JSX注释
  4. 单行JSX评论
  5. 多行JSX评论
  6. 单行JavaScript注释
/**
* 1. Multi-line
* TypeScript comment
* @constructor
*/


export const GoodQuote = observer(({model} : { model: HomeModel }) => {


console.log(model.selectedIndex)
return useObserver(() =>
<div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}>
<p>{model.quotes[model.selectedIndex]}</p>
{
// 3. Single-line comment
}
{ /* 4. True Single-line comment */}
{ /*
5. Multi-line
React comment
*/ }
</div> // 6. Javascript style comment


)
})

提交答案