如何在React组件的渲染方法中使用注释?
我有以下组件:
'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;
我的评论显示在UI中。
在组件的呈现方法中应用单行和多行注释的正确方法是什么?
总而言之，JSX不支持注释，无论是类似html的还是类似js的:
<div>
/* This will be rendered as text */
// as well as this
<!-- While this will cause compilation failure -->
</div>
在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创建一个注释节点，你必须更加花哨，看看这个答案。
有条件的呈现
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>
只渲染前后。
啊，刚刚注意到，这样做的一个缺点是，像typescript这样的linter可能会抱怨“注释”中不正确的东西。
