如何在 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;
https://i.stack.imgur.com/VjHrx.png
我的评论显示在 UI 中。
在组件的渲染方法中应用单行和多行注释的正确方法是什么?
{/* JSX comment*/}
{/* comment here */}
,但对于 javascript // comment here
有效。因此,答案取决于您要评论的位置。
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。
这是允许您使用 //
包含评论的另一种方法:
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 <DeleteResourceButton
// Confirm
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
显然,当 inside JSX 元素的尖括号时,//
语法是有效的,但 {/**/}
是无效的。以下中断:
render () {
return <DeleteResourceButton
{/* Confirm */}
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
除了其他答案之外,还可以在 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>
)
根据官方网站,这是两种方式:
<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?
总而言之,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。
就是这样。
有效的:
...
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>
)
}
...
React Native 中添加注释的两种方式
//(双斜杠)用于在 React Native 代码中仅注释一行,但只能在渲染块之外使用。如果要在我们使用 JSX 的渲染块中进行注释,则需要使用第二种方法。如果你想在 JSX 中评论某些东西,你需要在花括号内使用 JavaScript 注释,例如 {/* Comment here /}。它是一个常规的 / 块注释 */,但需要用花括号括起来。
/* 块注释 */ 的快捷键:
Ctrl + / 在 Windows 和 Linux 上。
Cmd + / 在 macOS 上。
{/*
JSX 注释语法:你可以使用
{/**
your comment
in multiple lines
for documentation
**/}
或者
{/*
your comment
in multiple lines
*/}
用于多行注释。并且,
{
//your comment
}
用于单行注释。
注意:语法: { //your comment } 不起作用。您需要在新行中键入大括号。
花括号用于区分 React 组件中的 JSX 和 JavaScript。在花括号内,我们使用 JavaScript 注释语法。
参考:click here
/** **/
比 /* */
有什么意义?
{
// Any valid JavaScript expression
}
如果您想知道它为什么起作用,那是因为花括号 { } 中的所有内容都是 JavaScript 表达式。
所以这也很好:
{ /*
Yet another JavaScript expression
*/ }
根据 React's Documentation,您可以像这样在 JSX 中编写评论:
一行评论:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
多行评论:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
JSX 中的 JavaScript 注释被解析为文本并显示在您的应用程序中。
您不能只在 JSX 中使用 HTML 注释,因为它将它们视为 DOM 节点:
render() {
return (
<div>
<!-- This doesn't work! -->
</div>
)
}
单行和多行注释的 JSX 注释遵循约定
单行注释:
{/* A JSX comment */}
多行注释:
{/*
Multi
line
comment
*/}
条件渲染
提到的这种方法 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
。
//
评论