如何在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的文档，你可以像这样在JSX中编写注释:

单行注释:

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

多行注释:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>

2019-08-28 05:05:29

其他回答

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

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

{
    // Any valid JavaScript expression
}

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

所以这也很好:

{ /*
         Yet another JavaScript expression
*/ }

2018-08-06 19:47:05

下面是React中注释的6种方式:

多行TypeScript注释属性注释单行JSX注释单行JSX注释多行JSX注释单行JavaScript注释

/**
 * 1. Multi-line
 * TypeScript comment
 * @constructor
 */

export const GoodQuote = observer(({model} : { model: HomeModel }) => {

    console.log(model.selectedIndex)
    return useObserver(() =>
        <div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}>
            <p>{model.quotes[model.selectedIndex]}</p>
            {
                // 3. Single-line comment
            }
            { /* 4. True Single-line comment */}
            { /*
              5. Multi-line
              React comment
            */ }
        </div> // 6. Javascript style comment

    )
})

2022-10-08 21:56:50

根据React的文档，你可以像这样在JSX中编写注释:

单行注释:

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

多行注释:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>

2019-08-28 05:05:29

在呈现方法中允许使用注释，但是为了在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

如何在React中使用注释

推荐文章

最新文章

标签