React JSX中如何仅在count>0时显示带括号的计数

你可以通过将整个带括号的内容作为三元表达式的真值返回值来实现需求，有两种常用写法：

模板字符串写法 #

直接用模板字符串拼接括号和计数，返回完整的带括号文本：

{tree[treeType].count > 0 ? `(${tree[treeType].count})` : null}

JSX片段写法 #

如果后续需要给数字添加样式等操作，可以用React片段包裹：

{tree[treeType].count > 0 ? <>({tree[treeType].count})</> : null}

为什么之前的写法有问题 #

• 第一种写法({tree[treeType].count > 0 ? tree[treeType].count : null})：括号属于JSX中的固定文本，不在条件判断范围内，所以无论count是否大于0，括号都会被渲染。
• 第二种写法{tree[treeType].count > 0 ? (tree[treeType].count) : null}：这里的括号是JavaScript分组运算符，仅返回数字本身，没有包含需求中的括号；若触发报错，大概率是代码上下文的语法问题（比如周围存在未闭合标签），但核心问题是未将括号纳入条件渲染的结果中。

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