Menu组件片段子元素语法错误：移除片段且保留逻辑的方法

直接移除多余的Fragment，将内部的三元表达式作为外层条件判断的返回值即可，原有逻辑完全保留：

{currentUser.level >= ACCESS_LEVEL.UNACTIVATED ? (
  post.is_note_locked ?
    <MenuItem
      onClick={() => handleLockUnlock(LOCK_UNLOCK_TYPE.NOTE, false)}>
      {titles.lock_note}
    </MenuItem> :
    <MenuItem
      onClick={() => handleLockUnlock(LOCK_UNLOCK_TYPE.NOTE, true)}>
      {titles.unlock_note}
    </MenuItem>
) : null}

原因说明 #

原来的<> Fragment是冗余的——内部的三元运算本身就返回单个MenuItem元素，外层条件判断直接返回这个元素即可，不需要额外的Fragment包裹，这样就不会触发组件无法接收Fragment的报错。

如果想让代码可读性更好，也可以把内部的菜单逻辑提取为变量：

// 先定义菜单元素
const lockToggleMenuItem = post.is_note_locked ? (
  <MenuItem onClick={() => handleLockUnlock(LOCK_UNLOCK_TYPE.NOTE, false)}>
    {titles.lock_note}
  </MenuItem>
) : (
  <MenuItem onClick={() => handleLockUnlock(LOCK_UNLOCK_TYPE.NOTE, true)}>
    {titles.unlock_note}
  </MenuItem>
);

// 在JSX中使用
{currentUser.level >= ACCESS_LEVEL.UNACTIVATED ? lockToggleMenuItem : null}

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