react antd 正则表达式 match

在react 中使用js的正则表达式match()来匹配字符串， 示例：

（regex是用来匹配数字\d+,然后使用match()，传入正则表达式regex进行匹配。结果赋值给matches)

(条件运算&&可以进行确定只有不是‘’而且不是null才会渲染匹配结果）

mport React from 'react';
function MyComponent() {
const string = 'Hello, 12345 World!';
const regex = /\d+/g; // 匹配数字的正则表达式
const matches = string.match(regex);
return (
<div>
<p>原始字符串: {string}</p>
<p>匹配结果: {matches && matches.join(', ')}</p>
</div>
);
}

在使用antd进行顶部标签的显示的时候，出现一些空标签，这时候就需要把空标签删除，或者给/edit/:id这样的path增加匹配，这就需要使用正则表达式：

例如， 在router中有这样的路由：

{   
  path: '/edit_users/:id',
  component: lazy(()=>import('@/pages/User/edit')),
  exact: false
}, 

在配置Antd标签的时候，就可以这样：

  {
    id: "/edit_users/:id",
    name: "编辑用户",
    path: "/Users",
    children: [],
  },  

然后在匹配标签的时候修改一下匹配的条件判断：

const returnName = (data, value)=>{
  let name = ''
  for(var i in data){
      // 对于普通的路由
      if(data[i].id == value){
          name = data[i].name
      }
      // 对于 路由中包含 :id 的情况
      if(!name && (data[i].id.match(":id")) ) {
        let temp_string = data[i].id.replace(":id", "\\d+")
        let my_regexp = new RegExp(temp_string)
        let temp_string_for_id = value.split('/')
        let id = temp_string_for_id[temp_string_for_id.length -1]
        if( value.match(my_regexp) ) {
          name = data[i].name + '-' + id
        }
      }
      if(!name && data[i].children.length > 0){
          name = returnName(data[i].children, value)
      }
      if(name) {
          break
      }
  }
  return name
}