如何在React JSX中发表评论

在开始使用React时, 你可能会尝试注释每个普通开发人员应该注释的代码, 以免再次编写或忘记一段代码。 React使用JSX, 它是ECMAScript的类似XML的语法扩展, 没有任何定义的语义。它不打算由引擎或浏览器实现。

好吧, 其他带有XML语法的疯狂语言, 那么注释应该类似于XML, 对吗？但是, 你可能会感到惊讶, 因为无法像对XML那样评论JSX区域：

import React, {Component} from 'react';

class Main extends Component {
  constructor(props, context) {
    super(props, context);
    // But this will be commented properly because it's Javascript :) not JSX
  }
 
  render() {
    return (
        <div>
            <!-- This won't work -->
            <!-- <span></span>-->
            <!--
            Neither this
            -->
        </div>
    );
  }
}

export default Main;

但是, 仍然可以照常注释Javascript。如何正确评论JSX区域？

评论JSX

你不能只在JSX内部使用HTML注释, 因为编译器会认为它们是真实的DOM节点。为了在JSX中正确注释, 你将像对待javascript / *一些JS代码* /一样注释, 但是注释需要用大括号括起来：

import React, {Component} from 'react';

class Main extends Component {
  constructor(props, context) {
    super(props, context);
    /* 
        alert("Hello World");
    */

    // console.log("hey");
  }
 
  render() {
    return (
        {/* A JSX comment, this will work :)
        <div>
        
        </div>
        */}
    );
  }
}

export default Main;

可怜的是, 由于JSX是一种”最近的”语言, 大多数代码编辑器和IDE都不提供键盘快捷键来注释JSX。

编码愉快！