问题产生原因： node 包问题； 解决方案：（二选一皆可） 1、使用CMD（windows系统）命令窗口去进行项目初始化； yarn init一路 enter即可； 2、使用npm init 初始化项目； // 使用npm初始化项目 npm init

使用next进行开发时，控制台有时会报 Warning: the 'url' property is deprecated 查了各种文档之后发现，这个错应该时使用了react-develops开发工具引入的，对项目功能不会有什么影响。 因此在尝试了一番之后，禁用了浏览器上安装的react-develops工具，问题解决。

https://www.cnblogs.com/kevingrace/p/5690241.html  背景 已经标明忽略的文件目录下的文件，git push的时候还会出现在push的目录中，或者用git status查看状态，想要忽略的文件还是显示被追踪状态。 产生原因 在git忽略目录中，新建的文件在git中会有缓存，如果某些文件已经被纳入了版本管理中，就算是在.gitignore中已经声明了忽略路径也是不起作用的， 这时候我们就应该先把本地缓存删除，然后再进行git的提交，这样就不会出现忽略的文件了。 解决方案 1、git清除本地缓存（改变成未track状态），然后再提交: [root@x...

react-hooks中判断当前点击对象是否属于某一组件。 在项目中遇到这种场景，开始是用点击事件的event.path属性去查找点击元素的父节点中是否有某一个class去进行校验的，后来发现在IE中，event.path并不兼容，于是找到了一下处理方案：  思路： 使用React-dom中的findDOMNode方法，先找到父组件，然后使用contains方法判断点击对象是否属于该组件。  直接上代码— import {  useRef, useEffect } from 'react'; import {  findDOMNode } from 'react-dom'; const FaN...

Antd Table组件表头不对齐解决方案 背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动  但是在添加了该属性之后，经常会出现表头不对齐的问题：  针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）；  如果以上两步仍解决不了对齐问题的话，请继续第三步操作  3、对table的每一个td 添加 className=...

function getUUid() { const s = []; const hexDigits = '0123456789abcdef'; for (let i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = '4'; s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); s[8] = s[13] = s[18] = s[23] = '-'; return s.join(''); }

React Hooks中父组件中调用子组件方法  场景： 在使用antd的Table组件时，对Table子组件进行了二次封装（<AsyncTable />）;在父组件（<f-comp />）中需要调用<AsyncTable />中的一个 函数，对antd原生Table上的dataSouce进行更新。所以，需要子组件中暴露一个函数供父组件调用，可以实时的去对子组件的值进行更新。  <mark>实现过程</mark> 使用到的hooks-- useImperativeHandle，useRef /* child子组件 */ // http...

Windows10修改本地hosts文件 1、cmd + R 打开命令行操作窗口 c:\\Windows\System32\drivers\etc   输入本地host文件所在目录，回车打开文件夹。 2、使用管理员身份打开host文件操作窗口  选择“以管理员身份打开 Windows PowerShell” 在窗口中输入 notepad .\hosts  打开hosts文件，进行编辑修改即可。

本章进行基础项目框架的搭建，使用到的技术点包括   基础框架：Next.js（一个轻量级的 React 服务端渲染应用框架） 构建工具：Yarn Typescript 后面我们会再了解eslint等工具的引入 github项目地址  1. 创建项目目录  1. mkdir next-ts 2. cd next-ts 3. yarn init -y  完成以上三步之后你已经创建了一个 【next-ts】目录，该目录下会有一个最基础的package.json文件，我们后续的操作皆基于该目录和该package.json来进行 2. 添加nextjs等基础依赖  1. yarn add react r...

Hi,在上一次分享的基础上，我们今天来了解下UI组件antd在该项目中的使用吧  1. 引入Antd组件&babel-plugin-import。 yarn add antd babel-plugin-import -D  z 2. 配置config  新建一个next.config.js,并引入next的css处理withCss模块；   解决不能引入css，只能使用<style jsx>的问题  const withCss = require('@zeit/next-css'); if (typeof require !== 'undefined') {  requir...

// 对y坐标轴的max进行处理 // 12 ==> 15 // 410 ==> 450 // 471 ==> 500 // .... function ceilMax(num) {  if (num <= 10) return 10; let numL = Math.ceil(num).toString().length; let oNum = Math.round(num / Math.pow(10, numL - 1)) * Math.pow(10, numL - 1); return oNum > num ? oNum : oNum + 0.5 * Mat...

本文为作者学习next.js框架架构的一些总结，仅出于个人观点，可留言共勉。 next版本：最新版 源码地址：https://github.com/zeit/next.js  1. 项目入口 在我们使用next.js进行项目搭建时，package.json是必备的文件，其中scripts则为我们运行development、product等环境的入口，next相关的指令则包括 {  "dev": "next dev", "start":"next start", "build": "ne...

1. 匹配字符串中括号包含的部分  字符串： pathname/[id]/action，需提取出 id这个字段 包含括号[]本身 /\[(.+?)\]/g 去掉括号[]，只匹配内容 /(?<=\[)(.+?)(?=\])/g 知识点  (.+?) 匹配任意字符串 ?<=tmp 不以tmp 开头