如何在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中。

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


当前回答

这就是方法。

有效:

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

}
...

其他回答

{
    // Any valid JavaScript expression
}

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

所以这也很好:

{ /*
         Yet another JavaScript expression
*/ }

总而言之,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可能会抱怨“注释”中不正确的东西。

除了其他答案,还可以在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中使用它们,必须将它们括在大括号中并使用多行风格的注释。

<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中注释如何工作的信息。