xiaocuizao-CSDN博客

原创 uuid

uuidRFC4122 (v1 and v4) generatorRFC4122 (v1 和 v4) 生成器Simple, fast generation of RFC4122 UUIDS.简单，快速地生成 RFC4122 UUIDS。Quickstart - CommonJS (Recommended) （快速入门 - CommonJS 推荐）npm install uuid//...

2020-03-21 22:46:28 263

原创 bizCharts

问题一：图表宽度设定 :官方：指定图表的宽度，默认单位为 ‘px’，当 forceFit: true 时宽度配置不生效。如：也可以写百分比直接在chartsg 上写 style ={{width:‘50’%’}}问题二：padding 指的是图表四周的宽度，包括axios 轴俩侧的文本，如果文本长度比较长被截掉的情况，可以设置padding的值问题三：柱形图之间的距和图表的...

2020-03-21 22:33:51 589

原创 css cursor属性

cursor:no-drop //是一个红色的圈加一个斜杠，表示禁止的意思cursor:not-allowed //是一个红色的圈加一个斜杠，表示禁止的意思

2020-03-21 22:13:02 368

原创 antd table表格错位

当遇到antdtable表格错位的时候，过查找资料，发现最后一列就不用设置的话，就不会再错位，因为antd会自己给最后一列分配宽度。在这里还遇到一个问题，就是当我们给列设置的宽度不合理的话（一般情况是设置的宽度较小），也会错位。这个时候，只需要调整宽度就好...

2020-03-21 22:10:05 1180

原创 antd tree

问题：当我使用antd 里面的tree组件时，设置了expandedKeystone，变为受控组件，发现第一个tree的渲染并没有按照我的state状态变化，打印发现数据没有问题后来发现了原因：马虎其中一个的子节点忘记设计了key值...

2020-03-21 22:05:42 1170

原创部分表格边框被挡住问题

用table的时候当有滚动条的时候，发现在表格加载出来后，上面部分的下边框被挡住，解决：border-collapse:collapse

2020-03-21 22:01:57 878

原创 antd使用tooltip的时候遇到的坑

在使用表格展示数据的时候，表格每一列的宽度是固定的，当单元格数据过多时，就会需要做溢出隐藏处理，当鼠标滑过（或点击等）的时候，展示该单元格的全部内容columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: ...

2019-11-28 23:04:28 13916 3

转载 React this.refs.dom与ReactDOM.findDOMNode使用与区别

1.this.refs.name获取dom节点的DOMNodehandleSubmit = () => { let name = this.refs.name.value, // 获取DOMnode content = this.refs.content.value, publishTime = this.refs.publishTime.va...

2019-11-28 22:36:38 672

原创 antd 表格错位问题

用antd table表格时，设置每一列的宽度，但是已经设置了，却还是错位。后来经过查找资料，发现最后一列就不用设置的话，就不会再错位，因为antd会自己给最后一列分配宽度。原因：有可能是我们列设置的宽度不合理（一般情况是设置的宽度较小），就会错位。这个时候，只需要调整宽度就好...

2019-11-04 22:17:05 1857

原创 React项目报警告 Can't perform a React state update on an unmounted component

我们不能在组件销毁后设置state，防止出现内存泄漏的情况分析出现问题的原因：我在componentDidMount里面运用了setState更新数据，然后频繁的切换到其他的页面,，此时组件已经销毁了，还在进行setState就会有警告；解决方法：componentWillUnmount(){ this.setState = (state, callback) =>{ retu...

2019-11-04 22:11:45 1553

原创 antd 的table td 超出部分隐藏并显示省略号，鼠标悬停显示内容

需求：描述内容过长时将超出部分隐藏并显示省略号，鼠标悬停查看全部信息columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: { maxWidth: 150, ove...

2019-11-04 22:03:05 8788 7

原创 TypeScript

typescript编辑器这边的操作全局安装 typescriptnpm/yarn/cnpm i/install/add typescript -g编辑器 atom/vs codevscode :搜索： typescript typescript Importer typescript toolbox使用typescript的语法全局多一个管理器 t...

2019-11-03 22:06:02 300

原创 git lens 的使用

第一次克隆远程他人分支代码git clone +远程主分支如：git@git.lug.ustc.edu.cn:lishuang/cl.git然后在文件夹内打开vscode 此时在vscode下方显示当前在主分支，点击左侧添加的git lens图标，找到 remotes,里面显示所有的远程分支，点击fenth刷新，然后点击你要基于的分支，右键，Switch to branch →enter ...

2019-09-30 01:05:54 14401

原创常用的vscode的插件

Beautify 1.5.0Bootstarp 3 SnippetsBootstrap 4 Fontawesome 4Chinese (Simplified) Language Pack for Visual Studio CodeColor HighlightS7 React/Redux/GraphQL/React-Native snippetsGitLens — Git supe...

2019-09-19 13:09:10 153

原创移动端layoput页面

import React, { Component } from 'react'import { Switch, Route, Redirect, withRouter } from 'react-router-dom'import { LayoutContainer } from './LayoutStyledComp'import Mask from './mask'impor...

2019-09-18 19:49:05 101

原创 React-redux框架之connect()与Provider组件用法讲解

https://www.jianshu.com/p/81e9e9eaf8fa

2019-09-17 11:45:02 115

原创 react-router与react、react-dom的版本问题

react-router@3.0.0版本对应的react,react-dom的版本为15.3.0react-router-dom 的版本对应的react 、react-dom是最新版本16.9.0

2019-09-16 12:23:40 4817

原创 redux的应用

https://www.jianshu.com/p/21960f78937dhttps://segmentfault.com/a/1190000015684895https://blog.csdn.net/qq_40963664/article/details/79526829

2019-09-15 22:06:35 196

Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。Loaders需要单独安装并且需要在we...

2019-09-06 15:50:25 123

原创在react中webpact配置找不到以及npm run eject 报错

我们在项目中肯定需要进行webpack配置，有俩种方案，一是将webpack.config.js抽离出来，另一种是在根目录下创建webpack.config.js文件，（注意：在react中我们是很难找到webpack.config.js文件的，如果想要看结构，可以构建一个demo的react项目，进行抽离，因为npm run eject的过程是不可逆的）当我们进行抽离的时候可能会发现如下错误...

2019-09-05 22:01:30 463

原创 node的卸载与安装

因为一些情况下我们可能需要一台机器安装多个node版本，这时我们就需要安装nvm 来管理node的版本。nvm是一个可以让你在同一台机器上安装和切换不同版本node的工具，nvm 的官方版本只支持Linux 和 Mac。 Windows 用户，可以用nvm-windows。安装nvm需要在Windows下卸载掉已有的node.js并安装一个多版本管理工具nvm-windows，方便切换不同版本...

2019-09-04 23:37:59 1771

原创 node.js及路由

Nodejs简介 - http://nodejs.cn/api/Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。COMMONJS模块化规范 AMD CMDCommonJS是一种规范，NodeJS是这种规范的...

2019-09-04 19:25:13 116

原创 vuex的介绍

vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。vuex中，有默认的五种基本的对象：state：存储状态（变量）actions：异步操作。在组件中使用是this.$store.dispath(’’)mutations：修改状态，并且...

2019-09-04 19:23:01 125

原创 react组件的通信

数据请求（交互型数据）会导致组件至少渲染俩次，第一次是没有数据的，第二次才有了数据，这个时候传递给子组件的数据一定要记得做判断，判断这个数据已经获取到，在渲染，通过与运算符二：子父组件通信（组件的状态只能自己改）也是通过属性绑定实现的所以，组件的数据的需要在父组件内定义方法，用来改变自己的数据，然后将方法传递给子组件，子组件调用该方法，并传递参数三：非父子组件通信：通过一个共同的父元素：...

2019-09-04 19:22:47 86

原创 react中Link和NavLink组件

参考：http://www.uprogrammer.cn/react-router-cn/docs/API.htmlLink现在，我们应用需要在各个页面间切换，如果使用锚点元素实现，在每次点击时，页面被重新加载，React Router提供了组件用来避免这种状况发生。当你点击时，url会更新，组件会被重新渲染，但是页面不会重新加载使用to参数来描述需要定位的页面。它的值既可是字符串，也可以...

2019-09-04 19:21:55 1477

原创 react的路由监听

在react中，所有的路由组件props身上都会有三个属性，而这三个属性记录了路径的变化情况，路径变化，属性就会变化，属性变化，就会触发componentWillReciveProps这个钩子，我们可以利用这个钩子做一些处理，而要监听路由的变化，就要监听整个项目的路由，所以我们要找到最大的组件最大的组件是app，但是他是函数式组件，我们不能动他，所以我们要找到除了app以下的我们自己定义的最大...

2019-09-04 19:21:25 2996 1

原创 react-redux

首先就要安装，yarn add react-reduxreact-redux 只是一个辅助工具，只是将react和redux进行更好的连接的桥梁工具，是帮助我们连接store和组件的桥梁,所以，在入口文件引入一个工具从react-redux import { Provider } from 'react-redux'然后引入store 绑定在Provider身上我们知道s...

2019-09-04 19:21:05 75

原创 export与 export default的区别

相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，...

2019-09-04 19:20:45 73

原创 git命令

版本管理工具：每一次提交记录为一个版本。版本管理的发展：CVS–>SVN–>GITCVS弊端：每一次提交都会提交所有的文件，造成服务器压力。SVN：每一次提交会和服务器进行对比，提交修改的文件。SVN至今仍然在使用（集中式）GIT：分布式的，每一个用户都有服务器(本地)。Git 是一个分布式的版本控制系统，在 Git 中即使用户离线，也能进行项目的提交和更新操作，等到下次连...

2019-09-04 17:34:09 103

原创 react中swiper的使用

①安装：yarn add swiper在入口文件index.js中引入样式文件import Swiper from 'dist/css/swiper.min.css';在需要用到swiper的组件中引入swiperimport Swiper from 'swiper'引入要引用的结构，然后实例化...

2019-08-24 15:09:04 501

转载 Can’t resolve ‘redux’

来源：https://whatibroke.com/2018/05/10/module-not-found-cant-resolve-redux-in-cusersfrontendsrcfrontendnode_modulesreact-reduxesconnect/方法已经试过，很好用Hi everyone,Another quick one. I’d installed react-re...

2019-08-24 14:22:36 4649 1

原创 privder组件与Router组件，App组件之间的包含关系

在入口文件index.js中，引入Provider与Router组件时的包含关系ReactDOM.render( <Provider> <Router> <App /> </Router> </Provider> , document.getElementB...

2019-08-24 13:06:52 296

原创 react中Fragment组件

在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了在我们定义组件的时候，return返回需要唯一根元素，所以我们经常会写一个div来包裹，，如果我们不想渲染这个div，减少dom渲染，就可以引用Fragment组件import React, { Component, **Fragment** } from 'react';clas...

2019-08-24 13:01:41 354

原创项目中axios的封装

import axios from ‘axios’;const http = ({url,params,data,method}) =>{//⭐⭐⭐⭐注意：我们的参数是一个对象return new Promise((resolve, reject)=>{axios({url,params,data,method}).then( res => resolve (re...

2019-08-21 16:02:24 251

原创 react--动态路由

路由传参路由接参案例：分类=》列表》详情首先配置组件库：Ant Design 不在是Ui布局，样式布局以组件的形式呈现的，目前是react的核心组件框架https://ant.design/index-cn在首页的底端有下列的资源相关资源：Ant Design Pro pc端Ant Design Mobile 移动端Ant Design 可以获取当前最新版本An...

2019-08-21 14:14:45 152

原创 react 编程式导航

路由跳转，replace / push 区别 push: a-b-c 可以回到上一级 this.props.history.push('路由地址') replace: a-b-c 回不到上一级适用于登录后，不需要重新回到登页面this.props.history.replace('路由地址')他们的跳转效果是一样的。但是当点击浏览器的后退按钮时，由于replace没有历史记录，不能直...

2019-08-21 09:28:51 2753

原创 react 组件通信

①跨组件通信参考：https://www.cnblogs.com/mengff/p/9511419.html通过React.createContextconst MyContext = React.createContext(defaultValue);下面是例子import React, { Component } from 'react'const MyContext = Re...

2019-08-21 09:09:13 67

原创 React二级路由的实现

首先考虑二级路由在哪里展示，他们的展示在对应的一级路由的组件内，所以先找到一级路由对应的pages页以登录和注册为例,在我们的里面实现二级路由（登录注册）二级路由的展示有俩种形式：①：通过一个开关切换俩个不同的组件import React, { Component } from 'react'import { Route } from 'react-router-dom'impor...

2019-08-20 23:23:02 10216 5

原创错误锦集--react路由

写东西一定要过脑啊在写跳转路由时，一定要写跟目录下 <NavLink to='/mine/login'>登录</NavLink> <NavLink to='/mine/register'>注册</NavLink>错误的写法:不小心加了.,这样 <NavLink...

2019-08-20 21:56:37 214

原创 react里面的跨域

反向代理在src目录下建一个文件setupProxy.js(注意:这里是写死的，必须是在src目录下面)在package.json里面也可以通过第三方模块http-proxy-middleware注意：在书写params时，引号’'里面不要有空格,这样会导致请求的数据有误，const proxy = require (‘http-proxy-middleware’)；module.ex...

2019-08-20 21:28:35 438

空空如也

空空如也