当前位置：首页 > news >正文

Umi、React框架学习笔记

news 来源：原创 2024/9/19 18:09:33

一、Css样式隔离

Umi脚手架自带Less+Css Modules 实现样式隔离。
原理：基于less中的className生成唯一Hash串。
类似Scoped，一个基于标签(v-xx)，一个基于className。
推荐写法

// less
.wrap-box {
  background: pink;
  .cont-text-box{
    border:1px solid #ccc;
    padding: 4px;
    .cont-text{
      font-size: 16px;
      color: #2b2b2b;
    }
  }
}

// Component
import styles from './index.less';
export default function TestCompoent() {
  return (
    <div className={styles['wrap-box']}>
      <div className={styles['cont-text-box']}>
        <div className={styles['cont-text']}>这是一段描述文字！</div>
      </div>
    </div>
  );
}

原理

{
 "wrap-box":"wrap-box___3XsTJ",
 "cont-text-box":"cont-text-box___2ScBT",
 "cont-text":"cont-text___3comu
}

二、路由配置

官方路由配置文档
路由配置文件 => /.umirc.ts，可以抽离为单独配置文件。
类似VueRouter配置方式，避免频繁操作ReactRouterDom。

// 配置案例
[
  { exact: true, path: '/index', component: './Index/index' },
  {
    path: '/user',
    component: './User/index',
    routes: [{ path: '/user/detail', component: './UserDetail/index' }],
  },
  { exact: true, path: '/', redirect: '/index' },
]

component参数为字符串，Umi会做自动导入。
- exact 严格匹配
- routes 子路由
- redirect 重定向
- …
wrappers 可以结合hooks实现路由拦截。

三、子路由配置

子路配置与VueRouter相同，通过将子路由组件注入到当前组件的props.children实现。
官方推荐使用layout组件控制路由渲染，也可以采用类似router-view的方式。
通过注入的props.route可以获得当前的路由信息。
注意子路由也为’路径全匹配’，上级路由不可省略，如案例中的’/user’。
案例

// 子路由渲染案例
import styles from './index.less';
export default function TestCompoent(props: any) {
  return (
    <div className={styles['wrap-box']}>
      <div className={styles['cont-text-box']}>
        <div className={styles['cont-text']}>这是一段描述文字！</div>
      </div>
      {/* 子路由渲染 */}
      <div className={styles['router-view-box']}>{props.children}</div>
    </div>
  );
}