如何在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开始或结束之前或之后使用单行注释。以下是一个完整的总结:
有效的
(
// 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>
)
除了其他答案，还可以在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>
)
另一方面，下面是一个有效的注释，直接从一个工作的应用程序:
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."
/>
}
