React：JSX中使用三元运算符报“Unexpected token”错误

嘿，我一眼就瞅到问题出在哪了——你在条件运算符的真值分支里多套了一层不必要的大括号，这直接把Babel搞懵了！

错误原因 #

你写的代码里，真值部分是({item2.user.entities.url.urls.map(...)})，这里的外层()里的{完全多余。因为我们已经处于JSX的表达式上下文（最外层的{}已经告诉React这是JS代码），你这里额外加的{会被Babel当成对象字面量的开头，但后面跟着的map调用根本不是对象的键值对结构，自然就报语法错了。

修正后的代码 #

直接把那层多余的{}去掉就行，改成这样：

{ 
  item2.user.entities.url !== null 
    ? item2.user.entities.url.urls.map((item3, index3) => { 
        return( <a href={item3.expanded_url} target='_blank'>{item3.expanded_url}</a> ) 
      }) 
    : null 
}

额外优化（可选） #

为了避免因为某个属性不存在导致的报错（比如urls可能是undefined），可以用ES6的可选链操作符?.来做更安全的空值判断，代码会更简洁健壮：

{ 
  item2.user.entities.url?.urls?.map((item3, index3) => (
    <a key={index3} href={item3.expanded_url} target='_blank'>{item3.expanded_url}</a>
  )) ?? null
}

注意：给map返回的元素加上key属性是React的最佳实践，避免渲染警告哦~

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