RN 70.6升级至72.4后花括号注释块触发Type Error问题咨询

将 React Native 从 70.6 版本升级到 72.4 版本后，iOS 和 Android 端均出现 Type Error: undefined is not a function (it is undefined) 错误，经排查该错误由 TSX 中的花括号注释块（{/* ... */}）触发。

错误复现代码 #

const HeaderContainer = ({ headerComponent }: { headerComponent: React.ReactNode }) => {
  return (
    <View>
      {/* 引发错误的注释块 */}
      {headerComponent}
    </View>
  )
}

可行的修复方案 #

• 删除花括号注释块
  直接移除引发问题的注释行即可消除错误：

  const HeaderContainer = ({ headerComponent }: { headerComponent: React.ReactNode }) => {
    return (
      <View>
        {headerComponent}
      </View>
    )
  }
  

• 用 Fragment 或其他组件包裹注释与子元素
  将注释和单个子组件包裹在 Fragment（<></>）或其他容器组件内：

  const HeaderContainer = ({ headerComponent }: { headerComponent: React.ReactNode }) => {
    return (
      <View>
        <>
          {/* 注释块不再引发错误 */}
          {headerComponent}
        </>
      </View>
    )
  }
  

• 为单个子组件添加同级元素
  在注释和目标子组件旁添加一个同级组件（比如 <Text>）：

  const HeaderContainer = ({ headerComponent }: { headerComponent: React.ReactNode }) => {
    return (
      <View>
        {/* 注释块不再引发错误 */}
        <Text>同级组件</Text>
        {headerComponent}
      </View>
    )
  }
  

补充说明 #

该错误同样出现在第三方库 react-native-pager-view 的 utils.tsx 文件第 10 行，错误模式完全一致。需要注意的是，TSX 中单个子组件旁放置花括号注释块本属于合法写法，但在全新创建的 React Native 72.4 项目中无法复现该问题。

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