如何使用JavaScript实现<a>标签动态显示，仅展示非当前语言的跳转链接

你可以直接基于现有代码中的lang变量做条件渲染来实现需求，修改后的完整代码如下：

export default function Layout({ children, lang, screenName, roomName, postTitle, screenNames, postTitles }) {  

  const homeUrl = '/' + lang + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenName) + "/";
  let englishUrl, arabicUrl;

  if (postTitle) {
    // 帖子页面对应多语言跳转链接生成
    englishUrl = '/' + 'EN' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.EN) + "/" + encodeURIComponent(postTitles.EN);
    arabicUrl = '/' + 'AR' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.AR) + "/" + encodeURIComponent(postTitles.AR);
  } else {
    // 普通页面对应多语言跳转链接生成
    englishUrl = '/' + 'EN' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.EN) + "/";
    arabicUrl = '/' + 'AR' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.AR) + "/";
  }

  // 全局设置页面文字排版方向
  if (typeof window !== 'undefined') {
    document.documentElement.dir = lang.toUpperCase() === 'EN' ? 'ltr' : 'rtl'
  }

  return (
    <div className={lang.toUpperCase() === 'EN' ? styles.roundedCornersBox : styles.roundedCornersBoxAR}>
      {
        lang.toUpperCase() === 'EN' 
        ? <a className={styles.urlNoDecoration} href={arabicUrl}><span className={styles.arname}>العربية</span></a>
        : <a className={styles.urlNoDecoration} href={englishUrl}><span className={styles.engname}>English</span></a>
      }
    </div>
  )
}

核心修改说明：

• 保留原有URL生成逻辑不变，仅调整渲染部分的代码
• 使用React三元条件渲染语法，判断当前页面语言后仅渲染指向另一种语言的跳转链接，同时删除了原有的分隔符元素
• 优化了页面文字方向的判断逻辑，减少了重复的环境判断代码

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