ReactJS中如何为数组数据开发适配动态长度的可复用Footer链接组件

可以实现完全可复用的Footer组件，无需手动编写重复的li标签，也能自动适配每个分组不同的链接数量，实现方案如下：

实现思路 #

• 把每个链接分组拆分为独立的可复用组件，自动识别当前分组的标题和链接数量
• 用Object.values()将每个分组对象转为数组，第一个元素为分组标题，剩余元素为链接内容，自动适配3个、4个或其他数量的链接
• 遍历链接数组动态生成li标签，避免重复代码

代码实现 #

1. 链接分组子组件（可复用） #

// FooterLinkGroup.jsx
const FooterLinkGroup = ({ groupData }) => {
  // 将对象转为数组，拆分标题和链接列表
  const [groupTitle, ...linkList] = Object.values(groupData);

  return (
    <div className="footer_link_group">
      <h3 className="footer_group_title">{groupTitle}</h3>
      <ul className="footer_link_list">
        {linkList.map((linkText, index) => (
          <li key={index}>
            <a href="/" className="footer_link">{linkText}</a>
          </li>
        ))}
      </ul>
    </div>
  )
}
export default FooterLinkGroup;

2. 主Footer组件 #

// Footer.jsx
import FooterLinkGroup from './FooterLinkGroup';

const Footer = ({ linkData }) => {
  return (
    <footer className="footer_container">
      {linkData.map((group, index) => (
        <FooterLinkGroup key={index} groupData={group} />
      ))}
    </footer>
  )
}
export default Footer;

3. 组件调用示例 #

// 父组件中调用
import Footer from './Footer';

const FooterLinksData = [
    {
        link1: "Insolvers",
        link2: "How it works?",
        link3: "I'm looking for job",
        link4: "I'm looking to hire",
    },
    {
        link1: "Features",
        link2: "Pricing",
        link3: "Schedule a Demo",
    },
];

// render中使用
<Footer linkData={FooterLinksData} />

扩展说明 #

如果后续需要给每个链接配置不同的跳转地址，只需要把数据结构调整为包含title和url的数组形式即可，组件遍历逻辑无需做大的改动：

// 优化后的数据结构参考
const FooterLinksData = [
  {
    groupTitle: "Insolvers",
    links: [
      { text: "How it works?", url: "/how-it-works" },
      { text: "I'm looking for job", url: "/job-seekers" },
      { text: "I'm looking to hire", url: "/employers" }
    ]
  }
]

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