React组件样式修改：如何为Terms and conditions链接添加下划线

实现方法 #

你可以通过以下几种方式实现需求，按可维护性优先级排序：

• 方法1：条件渲染追加自定义类名（最推荐）
  在渲染链接时判断文本是否匹配目标内容，匹配时添加专属类名，通过CSS控制下划线效果，代码修改如下：
  调整渲染部分的JSX：

  {links.map((link) => (
    // 补充key属性避免React控制台警告
    <li key={link}>
      <a 
        href="/" 
        className={link === "Terms and Conditions" ? "footer__link_underline" : ""}
      >
        {link}
      </a>
    </li>
  ))}
  

  对应添加CSS样式：

  .footer__link_underline {
    text-decoration: underline;
    /* 可按需扩展下划线颜色、偏移量、粗细等样式 */
  }
  

• 方法2：行内样式直接控制
  无需额外写CSS，直接通过行内样式条件判断实现：

  {links.map((link) => (
    <li key={link}>
      <a 
        href="/" 
        style={link === "Terms and Conditions" ? {textDecoration: "underline"} : {}}
      >
        {link}
      </a>
    </li>
  ))}
  

• 方法3：扩展数据源适配更多自定义场景
  如果后续还有其他链接需要特殊样式，建议修改数据结构避免硬编码字符串判断，可维护性更高：
  首先调整footerLinksData结构：

  const footerLinksData = [
    {
      title: "Quick Links",
      links: [
        {text: "Features", underline: false},
        {text: "Pricing", underline: false},
        {text: "Schedule a demo", underline: false},
        {text: "Chat Support", underline: false},
      ],
    },
    {
      title: "Privacy Policy",
      links: [
        {text: "Terms and Conditions", underline: true},
        {text: "Privacy Policy", underline: false},
        {text: "Refund Policy", underline: false},
      ],
    },
    {
      title: "Support",
      links: [
        {text: "Book a demo", underline: false},
        {text: "Customer Support", underline: false},
        {text: "FAQs", underline: false},
      ],
    },
  ];
  

  对应修改渲染逻辑：

  {links.map(({text, underline}) => (
    <li key={text}>
      <a 
        href="/" 
        className={underline ? "footer__link_underline" : ""}
      >
        {text}
      </a>
    </li>
  ))}
  

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