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

这篇具有很好参考价值的文章主要介绍了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 >

模板字符串文章来源地址https://www.toymoban.com/news/detail-507877.html

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

到了这里，关于React V6的dom循环（类似与v-for），动态类名，模板字符串的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

应用场景

代码实现

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2