ReactJS组件中三元运算符引发的语法错误问题咨询

嘿，我来帮你分析这段React代码里的问题：

核心语法错误原因 #

你这段代码里的主要问题是用大括号{}错误包裹了JSX元素：
在三元表达式的两个分支里，你写了{that.state._CmtCnt?<ViewAnswer ... />:null}，这里的大括号会让表达式返回一个包含React元素的对象（比如{<ViewAnswer />}），但React在渲染时只接受React元素、null、字符串等合法的可渲染节点，对象是无法被渲染的，这会直接触发语法或渲染错误。

另外还有两个非语法但建议优化的点：

• 使用松散相等==进行比较，容易因为隐式类型转换出现意外问题，推荐用严格相等===
• that.props.isFullView?true:false完全是多余的写法，因为that.props.isFullView本身就是布尔值，没必要再做一次三元转换

修正后的代码 #

基础修正版本 #

{
  that.props.actionType === "opinion" 
    ? (that.state._CmtCnt ? <ViewAnswer isFullView={that.props.isFullView} /> : null)
    : (that.state._CmtCnt ? <ViewComment isFullView={that.props.isFullView} /> : null)
}

更简洁的优化版本 #

我们可以把重复的that.state._CmtCnt判断抽出来，减少冗余代码：

{
  that.state._CmtCnt && (
    that.props.actionType === "opinion"
      ? <ViewAnswer isFullView={that.props.isFullView} />
      : <ViewComment isFullView={that.props.isFullView} />
  )
}

修正说明 #

1. 移除了包裹JSX元素的多余大括号，让三元表达式直接返回React元素或null，符合React的渲染规则
2. 替换==为===，遵循严格相等的最佳实践，避免类型转换坑
3. 简化isFullView的传递逻辑，直接使用原布尔值
4. 优化版本将公共判断逻辑提至外层，代码更简洁易读

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