如何在React中创建支持动态列表的可复用函数组件

你可以将完整的侧边栏列表数据以数组形式作为props传入组件，再通过数组map方法遍历动态生成<li>标签，不需要预先固定列表项数量，适配任意长度的列表需求。

优化后的可复用组件写法 #

const Sidebar = (props) => {
  return (
    <div className="sidebar">
      <ul>
        {/* 遍历传入的list数组，动态生成对应数量的li */}
        {props.list?.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  )
}

// 可选：设置默认值避免未传list时的报错
Sidebar.defaultProps = {
  list: []
}

不同场景的调用示例 #

你只需要在调用组件时传入对应长度的数组即可，组件会自动渲染对应数量的列表项：

• 场景1：需要3个列表项

<Sidebar list={["首页", "商品管理", "订单中心"]} />

• 场景2：需要5个列表项

<Sidebar list={["首页", "数据看板", "用户管理", "内容审核", "系统设置"]} />

补充说明 #

• 动态渲染列表时必须给每个子项加唯一key属性，这是React的规范要求，可以避免列表更新时的渲染异常：如果列表项有唯一业务ID（比如菜单ID），优先用业务ID作为key，没有的话可以临时用遍历的索引index作为key
• 如果列表项需要支持更多配置（比如跳转链接、左侧图标、点击事件），可以将数组项改为对象格式，示例：

// 传入带配置的数组
<Sidebar list={[
  {text: "首页", link: "/home", icon: "home-icon", onClick: () => console.log('跳首页')},
  {text: "用户管理", link: "/user", icon: "user-icon"}
]} />

// 组件内对应取值即可
<li key={item.id} onClick={item.onClick}>
  <Icon name={item.icon} />
  <a href={item.link}>{item.text}</a>
</li>

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