React Native中注释代码内变量引发ReferenceError报错求助

哦，这个坑我之前踩过！当时看到报错里的变量只在注释里，整个人都懵了——明明注释应该被编译器忽略啊？其实问题出在JSX的注释格式上，和你提到的SQL注释报错是一个道理：解析器对注释的处理规则和我们直觉里的不一样。

问题根源 #

在React Native的JSX代码中，如果你直接在JSX元素内部写普通的//单行注释（不带{}包裹），Babel转译器不会把它当成真正的注释，反而会把它解析成JSX文本节点的一部分。举个例子，你的代码大概率是这样的：

return (
  <View style={styles.container}>
    // 我是注释：const test = marker
    <Text>Hello World</Text>
  </View>
)

这里的// 我是注释：const test = marker会被JSX解析器当成一个文本元素，它会尝试解析里面的marker变量——但这个变量根本没定义，自然就抛出ReferenceError了。

正确的JSX注释写法 #

要让JSX里的注释被正确忽略，必须用{/* ... */}的格式包裹，不管是单行还是多行注释：

return (
  <View style={styles.container}>
    {/* 这是正确的注释，里面的marker不会被解析 */}
    {/* // 哪怕是带//的注释内容，包在{}里也没问题 */}
    <Text>Hello World</Text>
  </View>
)

如果一定要用//单行注释，也必须把它放在{}里面：

return (
  <View style={styles.container}>
    { // 这样写的单行注释也会被正确忽略
      const temp = marker // 这里的marker在注释里，不会被解析
    }
    <Text>Hello World</Text>
  </View>
)

总结 #

JSX的语法规则和普通JavaScript不一样，它对注释的格式有严格要求。别把普通JS里写注释的习惯直接套到JSX里，不然很容易出现这种“注释里的变量报错”的诡异问题。就像SQL里某些特殊注释格式会被解析器误读一样，本质都是解析规则的差异导致的。

内容的提问来源于stack exchange，提问作者Sarthak Agrawal