如何在 React 中使用注释 [英] How to use comments in React

问题描述

如何在 React 组件的 render 方法中使用注释?

我有以下组件:

'use strict';var React = require('react'),Button = require('./button'),UnorderedList = require('./unordered-list');class Dropdown 扩展了 React.Component{构造函数(道具){超级(道具)；}句柄点击(){alert('我点击这里');}使成为() {返回 (<div className="下拉列表">//whenClicked 本身是一个属性而不是一个事件.<Button whenClicked={this.handleClick} className=btn-default";title={this.props.title} subTitleClassName=caret"></Button><无序列表/>

)}}module.exports = 下拉菜单；

我的评论显示在用户界面中.

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

解决方案

在 render 方法内是允许注释的，但是为了在 JSX 中使用它们，你必须将它们包裹在大括号中并使用多行样式注释.

{/* whenClicked 本身是一个属性而不是一个事件.*/}<Button whenClicked={this.handleClick} className=btn-default";title={this.props.title} subTitleClassName=caret"></Button><无序列表/>

您可以在 此处阅读有关评论如何在 JSX 中工作的更多信息.

How can I use comments inside the render method in a React component?

I have the following component:

'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;

My comments are showing up in the UI.

What would be the right approach to apply single and multiple line comments inside a render method of a component?

解决方案

Within the render method comments are allowed, but in order to use them within JSX, you have to wrap them in braces and use multi-line style comments.

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

You can read more about how comments work in JSX here.

这篇关于如何在 React 中使用注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！