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

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

当前回答

在React Native中添加注释的两种方法

//(双正斜杠)只用于注释React Native代码中的一行，但它只能在渲染块之外使用。如果您想在我们使用JSX的呈现块中注释，则需要使用第二种方法。如果你想在JSX中注释一些东西，你需要在花括号内使用JavaScript注释，如{/* comment here /}。它是一个常规的/ Block注释*/，但它需要用大括号括起来。

/*块注释*/的快捷键:

Windows和Linux下按Ctrl + /。 Cmd + /在macOS上。

2019-08-05 14:10:56

其他回答

有条件的呈现

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

2021-07-06 19:17:55

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

{/ * <标题- > <内容- > < MapList - > < HelloWorld - > * /}

2019-10-10 19:58:41

在呈现方法中允许使用注释，但是为了在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中注释如何工作的信息。

2015-06-10 20:20:34

下面是另一种允许你使用//来包含注释的方法:

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}

因为右括号}被认为是注释的一部分，因此被忽略，这会抛出一个错误。

2016-06-23 09:05:28

如何在React中使用注释

推荐文章

最新文章

标签