- 博客(282)
- 收藏
- 关注
原创 flex:1给了我工作机会
今天就跟大家讲讲flex:1是什么的缩写,怎么去理解这个样式。首先要知道flex:1就是的缩写,首页要理解它们的作用,先看dom解构做项目时先看flex-basic。
2024-04-25 18:17:44 111
原创 mysql server 和mysql workBench的安装
选择性安装,只需安装server 和workBench,其中server是数据库,workBench是数据库的可视化。
2024-03-11 14:32:07 174
原创 forwardRef和useImperativeHandle的配合使用
useImperativeHandle往外暴露子组件的方法,注意useImperativeHandle第三个参数中括号依赖,有这个依赖,childFun才能获取到最新的值。通过ref调用子组件里的方法。
2024-03-07 17:52:59 193
原创 script的defer和async的理解
加了defer,结果跟场景一一样,所以defer对script标签内的代码不期待延迟执行的作用。script标签没有defer属性,不敢是不是通过src引入代码,结果一样。加了defer,获取到了div元素。js阻碍了dom元素的渲染。
2024-03-07 13:51:15 194
原创 typescript,eslint,prettier的引入
最后在tsconfig.json添加includes配置项,在该配置项中的目录下,所有的d.ts中的类型可以在这些目录下的其他文件引用。然后再tsc --init生成tsconfig.json配置文件,这个文件在package.json同级目录下。首先用npm安装typescript,cnpm i typescript。ts文件和d.ts文件都包含在src中。
2024-01-01 16:26:03 537
原创 umi预渲染
umi官网有预渲染,但是,是基于服务端渲染的,如果服务端渲染实现不了,那预渲染别谈,即使可以,但也不能指定路由渲染指定页面。在执行yarn build之后就可以渲染出about/indext.html页面。下面采用插件的形式实现。
2022-09-29 10:59:37 582
原创 umi2.x安装包有问题ERROR in ./node_modules/@ant-design/icons/es/icons/LoadingOutlined.js Module not found:
通过yarn create @umijs/umi-app创建的umi项目,在yarn安装完依赖包之后报了上图错误。
2022-09-10 16:25:43 975
原创 umi配置实战
注意.umirc.local.ts是运行时配置,也就是在开发的时候使用的配置,在yarn build打包的时候,.umirc.local.ts里的配置是不生效的。1.yarn add eslint安装以来;1.在package.json中配置"webpack": “umi webpack”这是链式配置,想要查看配置是否正确,依旧执行yarn webpack查看配置结果。2.在命令行中输入yarn webpack,ctrl+f查看你配置的内容。子路由也是在routes中配置,子组件通过props获取。....
2022-08-23 14:03:21 349
原创 更新为win11后没有git bash
在shell中新建项git bash,在git bash中新建项command,双击右边窗口中的“默认”,填上git-bash.exe的路径,这时,打开任意文件夹,右键=》显示更多选项,就可以看到git bash,如果想要在任意文件夹中点击右键就可以直接看到git bash,如下。输入reg.exe add “HKCU\Software\Classes\CLSID{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f /ve;...
2022-08-16 16:30:07 1013
原创 create react app怎么配置webpack
其中,style-resources-loader是支持less全局变量或者全局函数的,为了混入公共样式用的,mixins文件如下,自己可以封装一些公共less函数,供整个项目使用。执行命令npmruneject,把项目的webpack配置弹出来,执行完命令生成了以下文件。这样就可以自行配置webpack了。......
2022-07-27 16:19:25 1481
原创 svg弧线文本弧形文字
先看效果上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0; } text { font-size: 30px;
2022-05-22 13:43:00 821
原创 info There appears to be trouble with your network connection. Retrying...
用yarn下载依赖包的时候报错info There appears to be trouble with your network connection. Retrying...这个问题折腾了我一整天,网上有人说是镜像问题(用yarn config set registry https://registry.npm.taobao.org配置淘宝镜像),也有人说是权限问题(在win+x中用window powershell用管理员身份下载yarn),经过各种尝试,好多博主的方法都解决不了。自己用npm也
2022-03-15 12:52:56 2533
原创 js双等号==和三等号===
基本数据类型const a = 'malinshu'const b = 'malinshu'a === b // truea==b //trueconst num1 = 111const num2 = 111num1 == num2 // truenum1 === num2 // trueconst b1 = trueconst b2 = trueb1 == b2 // trueb1 === b2 // truenull === undefined //falsenull
2022-02-18 11:14:34 432
原创 chromedriver谷歌驱动与谷歌浏览器版本不匹配的问题自动化webdriver驱动
驱动下载地址:http://chromedriver.storage.googleapis.com/index.html下载完后放到系统盘(一般是C盘)下:
2022-01-16 16:27:14 875
原创 useRef和createRef的区别
function App() { const [num, setNum] = useState(0) const uRef = useRef() const cRef = createRef() const btnClk = () => { setNum((num) => num + 1) } useEffect(() => { uRef.current.value = num cRef.current.value = num con
2021-08-18 22:28:18 1741
原创 requestAnimationFrame无限循环pk定时器
requestAnimationFrame到底比起定时器来说有什么样的优势,大家不妨网上查阅一番,在次之前做个实践,定将大有收益,请看以下内容:let num = 0const run = () => { console.log('run') if (num % 60 === 0) { console.log(new Date()) } num += 1 requestAnimationFrame(run)}requestAnimationFrame(run)
2021-08-17 22:27:59 235
原创 react ref获取子组件中的input元素
function App(){ const myref = React.createRef() const Comp = React.forwardRef((props, ref) => (<div> <input ref={ref}/> </div>)) useEffect(() => { console.log(myref.current.value = 'malinshu') }, []) return(
2021-07-28 15:00:52 318
原创 input输入框默认背景
在chrome浏览器自动输入时,input就会有背景,字体大小和颜色都会变化,怎么解决?input:-webkit-autofill { transition: background-color 2000s;}input { -webkit-text-fill-color: #fff; caret-color:#fff;}
2021-07-22 19:28:11 546
原创 react-router-dom的基本使用
one和two是子路由import { BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";<Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .
2021-07-06 17:53:59 134
原创 selenium webdriver怎么自动化操作已经打开的浏览器
为了满足这个需求我可是拜访了度娘好几个小时,也找不到满意的答案,刚才问了测试的朋友怎么实现,一下子有了答案,在此总结一下步骤1、首先在命令行中输入以下命令:chrome.exe --remote-debugging-port=9948 --user-data-dir=“D:\TestPy”其中端口9948已有的任意一个端口,可以在任务管理器里面找(ctrl+shift+esc)这时会在D:\TestPy中生成一系列文件(在这之前别忘了在环境变量中PATH里将chrome的路径添加进去,我的环
2021-07-04 16:48:03 1574
原创 CreateProcess error=2, 系统找不到指定的文件 pycharm运行错误
选择正确的选项,让python interpreter的路径为python x.x,然后点击ok保存就可以了
2021-07-03 23:15:57 1723
原创 react hook useCallback的使用
首先探索下useCallback是什么const callback = useCallback(() => { console.log('依赖只有count') }, [count]); <button onClick={() => console.log(callback)}> what is callback</button>当点击按钮的时候,控制台打印了一下内容由此看出,常量callback的值就是一个函数,函数里面的代码就是我们写在u.
2021-07-03 21:22:09 675 1
原创 react useContext跨层级组件传值
父组件import ContextComp,{TestContext} from './components/ContextComp'function App(){ const showName = (name) => { console.log(name) } const ItemComp = () => { const {name} = React.useContext(TestContext) return <div onClick={().
2021-06-21 17:49:43 394 3
原创 async await等待的是不是promise的区别
场景一const waitForYou = () => { return new Promise((resolve,reject)=>{ resolve(1) }) } const trigger = async () => { let res = await waitForYou() console.log('执行了吗', res) } return ( <div className="App">
2021-06-20 11:00:23 762
原创 mobx computed
场景一@observable person = { name:'malinshu', high:180}@action setName = (value) => { this.person.name = value}@computed get getHigh(){ let {high} = this.person console.log(high) return high}<input onChange={(e) => { m
2021-06-20 10:45:56 655
原创 最全的react-json-view用法
let my_important_json = { name:'malinshu', tall:171, other:{ pant:true, arr:[1,2,3,4] } }<ReactJson collapsed={false}//是否收起,true为收起 indentWidth={10}//缩进 iconStyle='circle' src={my_important_json}.
2021-05-24 13:52:18 3714 1
原创 react函数组件的生命周期
import { useEffect } from 'react'function FunComponent() { useEffect(()=>{ return ()=>{ console.log("WillUnmount") } }) useEffect(()=>{ console.log("DidMount") },[]) return ( <d
2021-05-09 18:13:43 5044
原创 TypeError: Cannot read property ‘location‘ of undefined react-router-dom报错
import {Route, BrowserRouter, Link} from ‘react-router-dom’<BrowserRouter> <Link to='/fun'>fun</Link> <Link to='/import'>import</Link> <Route path="/fun" component={FunComponent}/>
2021-05-09 17:56:32 608
原创 react中useState的使用
import { useState } from 'react'function FunComponent() { const [man, setMan] = useState({ name: 'malinshu', tall: 180 }) const setName1 = () => { setMan({ name: 'ma' }) console.log(man)//{name: "malinshu", tall: 180}页面更新成了{ nam
2021-05-09 16:55:34 1151
原创 mobx在react中引用的几种方式
先看效果,类似于vue的双向绑定方式一(inject方式):import {Provider} from 'mobx-react'import mobxStore from './store/testStore'import ByInject from './components/byInject'function App() { return ( <div className="App"> <Provider receiverStore={mobxSt
2021-05-09 00:13:21 812 2
原创 一维数组转为多维,用于tree树形组件
filterArray = (list, parentId) => { var tree = []; var temp; for (var i = 0; i < list.length; i++) { if (list[i].pid === parentId) { var obj = list[i]; temp = this.filterArray(list, list[i].id); if (temp.leng
2021-04-25 13:16:43 160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人