JSX中如何单行实现基于条件判断的自闭合组件渲染？

你预想的<(flag ? Comp1 : Comp2) att1={attValue} ... />写法，目前所有正式版本的JSX/React都不支持。JSX的语法解析规则要求，尖括号后紧跟的标签位必须是明确的组件标识符、或首字母大写的已声明变量，不能直接放内联的三元运算表达式。

你要实现的单行条件渲染需求，用现有语法完全可以满足，常用方案有两种：

• 最符合开发规范、可读性最好的方案只需要提前一行把要渲染的组件赋值给大写开头的变量，渲染部分仍然保留单行自闭合标签的写法，性能和可维护性都没有损失：

const CurrentComp = flag ? Comp1 : Comp2
return <CurrentComp att1={attValue} /* 其余组件属性按正常JSX语法追加即可 */ />

• 如果要把逻辑完全压缩到同一行、不提前声明变量，可以直接调用React原生的元素创建方法绕开JSX标签位的语法限制，渲染效果和普通JSX写法完全一致：

return React.createElement(flag ? Comp1 : Comp2, { att1: attValue, /* 其余组件属性以键值对形式写入配置对象 */ })

关于特性规划的问题：从目前JSX的公开语法提案进度、React官方公示的版本迭代路线来看，暂无计划在近期新增「标签位直接支持内联条件表达式」的语法。核心原因是这类写法会大幅提升JSX静态解析、编译优化的实现复杂度，而上述两种替代方案已经可以零成本覆盖同类需求，新增该语法的投入产出比极低。

内容的提问来源于stack exchange，提问作者Mahmoud Mousa Hamad