如何在React中使用注释

如何在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注释语法: 你可以使用

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

{/* 
  your comment 
  in multiple lines
*/}

对于多行注释。而且,

{ 
  //your comment 
}

对于单行注释。

注意:语法: {//你的评论} 是行不通的。你需要在新行中输入大括号。

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

参考资料:按此处

2019-01-05 18:42:28

其他回答

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

2019-06-18 07:58:21

JSX注释语法: 你可以使用

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

{/* 
  your comment 
  in multiple lines
*/}

对于多行注释。而且,

{ 
  //your comment 
}

对于单行注释。

注意:语法: {//你的评论} 是行不通的。你需要在新行中输入大括号。

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

参考资料:按此处

2019-01-05 18:42:28

总而言之，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创建一个注释节点，你必须更加花哨，看看这个答案。

2019-01-21 19:03:57

{
    // Any valid JavaScript expression
}

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

所以这也很好:

{ /*
         Yet another JavaScript expression
*/ }

2018-08-06 19:47:05

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

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."
           />
}

2018-02-15 04:11:42

如何在React中使用注释

推荐文章

最新文章

标签