如何在React JSX中发表评论

【如何在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。
编码愉快!

    推荐阅读