如何在子项为空时隐藏空括号

if (childItem) {
  return (
    <div>
      {childItem} {/* 渲染子项 */}
    </div>
  );
} else {
  return null; // 不渲染括号和子项
}

return (
  <div>
    {childItem ? `(${childItem})` : null} {/* 渲染括号和子项 */}
  </div>
);

return (
  <div>
    <span className={childItem ? 'show-brackets' : 'hide-brackets'}>(</span>
    {childItem}
    <span className={childItem ? 'show-brackets' : 'hide-brackets'}>)</span>
  </div>
);

.show-brackets {
  display: inline;
}

.hide-brackets {
  display: none;
}