跳到主要内容

6 篇博文 含有标签「React」

查看所有标签

· 阅读需 2 分钟
Meoo

生产模式构建静态网页时,默认会生成 .map 文件,比较大,并且部署后通过浏览器访问可以在控制台看到开发时的源代码,虽说是方便调试,但是都构建 Production Build 了还能被查看代码总让人心里不太舒服。

配置

可以通过配置 .env 文件,将 GENERATE_SOURCEMAP 设为 false 即可不生成 sourcemap 文件。

创建 .env 文件,并在文件中添加这行代码

GENERATE_SOURCEMAP = false

· 阅读需 4 分钟
Meoo

开发过程中经常需要封装组件,如果多个功能需求都差不太多,一个组件可以复用的话,那简直太方便了。

举个例子,一个输入表单的组件,复用时每一个不同的功能里,输入标签数量是不一样的,比如登录有两个输入框,而修改用户名密码可能有4个输入框。指定几个输入框以及提示、内容什么的可以通过props传入。重点是如何获取这几个输入标签的值并传给父组件呢?当然,一种方式是使用受控组件,每一个输入框对应一个state或者他们的值都传入到一个存数组的state里。另一种方式通过非受控组件实现,也就是这里要说的。

· 阅读需 4 分钟
Meoo

一个很常见的需求:有些路由,需要登录才能访问,不登陆的情况下访问它就跳转到登录页面。这里就用 Context 来写个路由鉴权的小例子。

react-router v6稳定版出来了,有许多改变,以前拦截路由的方式也用不成了。在世界之外遨游了好久终于找到了一篇文章,学废了!整理学习一下分享出来。

· 阅读需 1 分钟
Meoo

安装react-router-dom的时候版本已经变成6.0.2了,没注意到,结果在写项目时候怪怪的,以往的写法都不对了,照着仓库的例子学了学发现跳转时闪屏。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter,Route, Routes } from 'react-router-dom';
import User from './pages/User/User';
import Main from './pages/Main/Main'

ReactDOM.render(
<React.StrictMode>
<HashRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="user" element={<User />}/>
<Route path="*" element={<Main />}/>
</Route>
</Routes>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);

官方仓库的教程只写了 <Router></Router>,虽然比#号看起来舒服,但是一跳转就闪。

使用 <HashRouter></HashRouter> 就不闪屏了。