React Native/ES6报错：unexpected token, expected ";" 求助

嘿，刚上手React Native碰到这种语法小坑真的太正常了！我一眼就瞅到你代码里的问题啦😉

你报错的核心原因是箭头函数的写法和三元运算符的位置搭配错了，导致JS解析器认不出正确的语法结构，才会抛出Unexpected Token错误。

先看你原来的代码问题点：

// 错误写法：大括号包裹了判断条件，箭头函数后直接跟问号，语法不合法
const collectionsHeaderHandler = ({ favorites }) => {favorites.meta.collections} ? {copyDek.FavoritesLayout.collectionsHeader} : "";

修复后的两种正确写法 #

写法1：隐式返回的简洁版（推荐逻辑简单时用）

直接去掉多余的大括号，让箭头函数隐式返回三元表达式的结果：

const collectionsHeaderHandler = ({ favorites }) => 
  favorites.meta.collections ? copyDek.FavoritesLayout.collectionsHeader : "";

写法2：显式return版（适合后续要加更多逻辑的情况）

如果之后要在函数里加额外判断，就用大括号包裹代码块，记得加上return关键字：

const collectionsHeaderHandler = ({ favorites }) => {
  // 比如后续可以加容错判断：防止favorites或meta为undefined
  if (!favorites?.meta) return "";
  return favorites.meta.collections ? copyDek.FavoritesLayout.collectionsHeader : "";
};

额外优化建议（更贴合你的需求） #

如果collections是一个数组的话，JS里空数组[]会被当成truthy值（也就是会返回头部内容），这不符合你“为空时不渲染”的需求。所以最好判断数组的长度：

const collectionsHeaderHandler = ({ favorites }) => 
  favorites.meta.collections?.length > 0 ? copyDek.FavoritesLayout.collectionsHeader : "";

这里的?.是可选链操作符，能防止favorites或meta为undefined时抛出错误，非常适合React Native里的 props 容错处理。

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