Menu Flyout触发Unexpected constant condition错误 内部链接跳转问题

报错原因 #

你第246行的多值匹配语法错误，JavaScript中逗号运算符会返回最后一个表达式的值，你写的判断语句最终会固定返回字符串'blog'，属于恒真的常量条件，因此触发了ESLint的no-constant-condition规则报错，同时也无法实现多路径匹配的逻辑。

修复方案 #

使用Array.includes()方法实现多值匹配，将需要匹配的内部路径统一放在数组中，判断当前路径是否在数组内即可。你也可以将匹配规则提至组件外，避免组件重复渲染时重复创建数组，优化性能。

修改后的完整代码如下：

const INTERNAL_LINK_PATHS = ['about', 'governance', 'people', 'blog']

export default function Menu(props) {
  return (
    <StyledMenu tabIndex={0}>
      <StyledMenuTitle>
        <span style={{ marginRight: '0.25rem' }}>{props.data.name} </span>
        <MenuFlyout>
          {props.data.sublinks.map((item, index) => {
            return (
              <StyledMenuItem tabindex={index} key={index}>
                {INTERNAL_LINK_PATHS.includes(item.link.split('/').slice(-1)[0]) ? (
                  <StyledExternalLink href={item.link}>
                    <StyledTitle>{item.name}</StyledTitle>
                  </StyledExternalLink>
                ) : (
                  <StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer">
                    <StyledTitle>{item.name}</StyledTitle>
                    {item.description && <StyledDescription>{item.description}</StyledDescription>}
                  </StyledExternalLink>
                )}
              </StyledMenuItem>
            )
          })}
        </MenuFlyout>
      </StyledMenuTitle>
    </StyledMenu>
  )
}

内容的提问来源于stack exchange，提问作者Christoph Könekamp