关于基于react框架的umi框架及传参方式小白教学

说起来如果是做react项目不一定非得选react官方脚手架，umi框架也是很好的选择；相对于react官方脚手架来来说；更加的简单

好用；我们都知道官方脚手架有高低板之分；而且呢还非常麻烦就对于配置路由来说；虽然高板比低版本的要稍微简单一点；但是如果你想选择更见得方式那就是umi了；先简单介绍一下umi，就是基于react开发的一款框架，可以说是把react摸得很通透；它里面呢是采用约定式路由的规则。只要你遵守了规则就很简单很随意的使用；下面来看一下umi的用法；

巫米；

自己随手建个项目；然后在该项目里建个src文件夹；src文件夹在终端中打开；

全局安装一次umi       打开终端执行 npm i -g umi

执行 umi g page index  //创建组件并自己生成css样式文件；

完成后会有一个pages文件夹；一个index。js和一个index。css；即创建完成；

//在这个框架里面你完全不用配置路由，所有的；路由它自己给你生成，当然文件是隐藏的你看不到；你也不用管；

运行到浏览器就是umi dev

那么需要用到嵌套怎么办?

这个不用担心；react中怎么用这里就怎么用；你可以使用组件套组件标签的方式；

 

如果需要传参；那就在pages文件夹下再建个文件夹；比如传参到detail文件下；那就建个detail文件夹；从pages文件夹中取出相应的组件和css样式；

如果是params传参；那么接受参数的该组件要改名为$id.js

无状态组件内部通过props.match.params.id来接收；代码如下：

export default function(props) {

return (

<div className={styles.normal}>

<h1>Page list</h1>

<p>{props.match.params.id}</p>

</div>

);

}

 

无状态组件内部如果通过query、传参；那么首先：

<Link to={{pathname:'/list',query:{id:'hello query'}}}>list</Link>

 

然后同样是新建文件夹跟上面是一样的；只不过不是$id文件名了；而是index.js代码如下：

export default function(props){

return(

<div>

<h2>querychuancan</h2>

<h2>{props.location.query.id}</h2>

</div>

)

}

 

还有一种state传参，就只是把query替换为state仅此而已；啥都不用变；

 

 

关于嵌套；我们在传参的文件夹里面建个_layout.js；在这里面的代码如下：export default function (props){

return(

<div>

<h2>外城布局容器</h2>

<div>{props.children}</div>

</div>

)

}

如果有这个文件，那么我们的传值路劲会优先加载这个页面；要想在这里面嵌套显示；那么就只能给个容器：方式：<div>{props.children}</div>

 

 

如何声明全局样式？

只需要在pages下建个global.css文件：这里面样式为公共样式；任何组件无需引用；符合的都能生效；

 

配置文件？去官网拿；

export default {
  plugins: [
    // 有参数
    [
      'umi-plugin-react',
      {
        dva: true,
        antd: true,
      },
    ],
    './plugin',
  ],
};

写入你需要用的第三方插件；后方跟个true即可；

例如以上的dva和antd；dva是状态管理；而antd是react的一款pc端的ui框架；

需要配置的很少；只需要安装下面的依赖  npm i umi-plugin-react --save-dev