React V6的dom循环（类似与v-for），动态类名，模板字符串

应用场景

比如一个管理系统的左侧菜单，想用for循环来产生，那么就需要实现一个类似v-for的功能，react中可以这样写

代码实现

循环菜单

//页面路由
  const str = 'done'
  const menuArr = [
    {
      name:'数据统计',
      icon:HomeOutlined,
      path:'/',
    },
    {
      name:'内容管理',
      icon:DiffOutlined,   //这个图标不能加引号 ,否则变成字符串
      path:'/article',
    },
    {
      name:'发布文章',
      icon:EditOutlined,
      path:'/publish',
    },
    {
      name:'测试菜单',
      icon:'',
      path:'/testShow',
    },
    // {
    //   name:'params传参',
    //   icon:DiffOutlined,
    //   path:'/paramsPage',
    // },
  ];


//最初的菜单模式
<Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={pathname}
            selectedKeys={pathname}
            style={{ height: '100%', borderRight: 0 }}
          >
            {/* <Menu.Item icon={<HomeOutlined />} key="/">
              <Link to='/'>数据概览</Link>
            </Menu.Item>
            <Menu.Item icon={<DiffOutlined />} key="/article">
              <Link to="/article">内容管理</Link>
            </Menu.Item>
            <Menu.Item icon={<EditOutlined />} key="/publish">
              <Link to='/publish'> 发布文章</Link>
            </Menu.Item>
            <Menu.Item icon={<EditOutlined />} key="/testShow">
              <Link to='/testShow'> 测试文章</Link>
            </Menu.Item> */}
          </Menu>

//然后想把他改成for循环的
<Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={pathname}
            selectedKeys={pathname}
            style={{ height: '100%', borderRight: 0 }}
          >
            {/* 注意这里的循环不是{}而是() */}
            {
              menuArr.map((item) => (
                <Menu.Item icon={item.icon ? <item.icon /> : <EditOutlined />} key={item.name}>
                  {/* 模板字符串的使用 */}
                  <Link to={item.path}> {item.name}{`${str}`}</Link>
                </Menu.Item>
              ))
            }
          </Menu>

动态类名

//动态类名
  const isActive = true
  const className = `header ${isActive ? 'active' : 'inactive'}`;
<Header className={className}></Header >

模板字符串

<Link to={item.path}> {item.name}{`${str}`}</Link>