React Native出现Unterminated JSX contents报错如何修复

错误原因 #

Unterminated JSX contents报错代表JSX结构存在未正确闭合的标签，本次报错定位到第13行</View>只是解析器最终发现结构不匹配的位置，真正的错误出在上层的Text组件：
你代码中包裹首页文本的Text组件写了错误的闭合格式：

<Text>I am the home screen<Text/>

这里尾部的<Text/>是自闭合组件语法，相当于新增了一个空的Text组件，并没有关闭前面包裹文本的起始Text标签。JSX解析器读到外层</View>时，发现内部的Text标签始终没有闭合，就抛出了语法错误。

修复方法 #

• 找到上述Text组件所在行，把尾部错误的<Text/>替换为正确的成对闭合标签</Text>
• 写完JSX标签后核对闭合规则：需要包裹子元素/文本的组件必须用</组件名>格式闭合，不需要子内容的组件可以在开标签尾部加/写成自闭合格式，比如示例中的<Button />就是合法的自闭合写法。

修复后完整可运行代码 #

import React from 'react'
import { View, Text, Button } from 'react-native'
import { useNavigation } from "@react-navigation/core";

const HomeScreen = () => {
   const navigation= useNavigation();
   return (
       <View>
         <Text>I am the home screen</Text>
         <Button 
           title="Go to Chat Screen"
           onPress={() => navigation.navigate("Chat")}
         />
       </View>
   )
}
export default HomeScreen

同类错误排查技巧 #

• 当JSX语法报错指向最外层容器闭合标签时，优先往回逐层检查内层标签的闭合情况，这类错误的报错定位通常不是真正写错代码的位置，是解析器走到结构最外层才检测到标签栈不匹配
• 开发时可以在编辑器中开启JSX语法高亮、标签自动补全功能，标签不配对时编辑器会直接标红提示，不需要等到运行编译才发现问题
• 养成写开标签后立刻补全闭合标签、再填充内部内容的编码习惯，能大幅减少这类低级语法错误

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