react标签解析

在react中封装路由遇到的问题

配置文件：

import Login from '../pages/login'
import Admin from '../pages/admin'
import Home from '../pages/admin/home'
import Product from '../pages/admin/product'

const routes = [
  {
    path: '/login',
    component: Login,
    componentName: Login,
  },
  {
    path: '/',
    component: Admin,
    componentName: Admin,
    children: [
      {
        path: '/home',
        component: Home,
      },
      {
        path: '/product',
        component: Product,
      },
    ],
  },
]

export default routes

{router.map((route) => {
  return <route.component />
})}
{router.map(({ path, component, children = [], componentName }) => {
  return <component />
})}

第一段代码可以渲染，第二段代码渲染不了

一开始认为是ES6，类和结构赋值的问题

class B {}
let a = {
	b: B,
}
const { b } = a
console.log(a.b === b)  //true
//经过验证，不是ES6的问题

{router.map((route) => {
  console.log(route.component)
})}
{router.map(({ path, component, children = [], componentName }) => {
  console.log(component)
})}
//打印出来也确实都是react类式组件

//那么我们打印标签试试
{router.map((route) => {
  console.log(<route.component />)
})}
{router.map(({ path, component, children = [], componentName }) => {
  console.log(<component />)
})}
//这个时候遇到了问题

symbol对象中的type类型不同，我们打印一个div试试

console.log(<div />)

现在可以确定是标签解析出了问题

class B {}
let a = {
	b: B,
}
const { b } = a
console.log(a.b === b)
console.log(<a.b />)
console.log(<b />)
//直接报错了

const c = a.b
console.log(<c /> === <b />)
console.log(<c></c>)
console.log(<b></b>)
//也直接报错了
//现在可以确定不是原生的标签解析问题

//我们来到react中看看
class B extends React.Component {}
let a = {
  b: B,
}
const { b } = a
console.log(a.b === b) //true
console.log(<a.b />)
console.log(<b />)
console.log(<a.b /> === <b />)  //false
//果然是react中标签解析的问题

这里应该要去学习react标签解析的源码