WinterWang0207-CSDN博客

原创 react 日常工作小笔记

默认配置 defaultProps默认配置通过||操作符可以实现，React.js 也提供了一种方式defaultProps，可以方便的做到默认配置。class LikeButton extends Component { static defaultProps = { likedText: '取消', unlikedText: '点赞' } constructor () { super() this.state = { isLiked: fal...

2020-06-01 20:36:56 341

原创 js Window对象

//此属性表示窗口是否以全屏显示。 Window.fullScreen //返回一个对 history 对象的引用。 Window.history //history.back(); // 等同于点击浏览器的回退按钮 //history.go(-1); //等同于history.back(); //获得浏览器窗口...

2020-03-28 19:12:47 384

原创 js String对象学习

//charAt() 方法从一个字符串中返回指定的字符。 let str = 'Winter Wang' console.log(str.charAt(1)) //i //includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。 let str2 = 'Winter Wang' conso...

2020-03-28 19:11:16 309

原创 js 语句

//try...catch语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。 //try如果出现以下情况，catch就抛出一个异常问题所在 try { nonExistentFunction(); } catch(error) { console.error(error);//RnonExistentFunction is not ...

2020-03-28 19:08:39 189

原创 js 数组方法

//定义一个数组 var fruits = ['香蕉', '芒果','橘子','荔枝','樱桃']; //添加元素到数组的末尾，改变原数组 var newLength = fruits.push('香橙'); //console.log(newLength) //6 //console.log(fruits) //["香蕉", "芒果", "橘子", ...

2020-03-28 19:01:11 366

原创 js函数及函数属性

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。当只有一个参数时，圆括号是可选的：singleParam => { statements }没有参数的函数应该写成一对圆括号。()=>{statement...

2020-03-28 18:58:09 398

原创 js 有哪些主要错误提示

js错误提示ReferenceError（引用错误）对象代表当一个不存在的变量被引用时发生的错误。SyntaxError 对象代表尝试解析语法上不合法的代码的错误。TypeError（类型错误）对象用来表示值的类型非预期类型时发生的错误。RangeError对象标明一个错误，当一个值不在其所允许的范围或者集合中。...

2020-03-28 18:51:59 438

原创 js 找出字符串中连续出现最多的字符和个数

//首先写一个函数，传入一个字符串 function getMaxCharacters(str) { const map = {} //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 var arr = str.match(/(\w)\1+/g) var max = arr[0].lengt...

2020-03-28 18:50:16 2336

原创 js this学习

this的指向是调用时决定的this永远指向最后调用它的那个对象var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log(this); // Window...

2020-03-28 18:48:30 130

原创 js基础学习表达式解构赋值展开语法 super关键字

表达式条件（三元）运算符是JavaScript仅有的使用三个操作数的运算符。一个条件后面会跟一个问号（?），如果条件为true，则问号后面的表达式A将会执行；表达式A后面跟着一个冒号（:），如果条件为false，则冒号后面的表达式B将会执行。isMember ? '$2.00' : '$10.00'解释为如果条件isMember为真执行$2.00 如...

2020-03-28 18:38:39 253

原创 react+Antv-g2 demo

父组件Demo1.jsimport React, { Component } from 'react'import './relevance.css'import Relevancenum from './Relevancenum'import Tabschange from './Tabschange'export default class Demo1 extends ...

2020-02-28 10:32:22 3858

原创 react Router 学习

功能：1.进入项目后的默认路径是home，默认展示首页模块2.点击路由，切换子组件3.点击文章路由，根据传值不同进入三级详情路由，同时二级路由不显示4.点击返回首页，跳转到首页安装routernpminstallreact-router-dom --save配置路由：1.根组件index.js里面引入路由组件你可以选择BrowserRouter路由...

2020-02-22 15:59:39 281

原创 react redux 学习

说明：先说一下写两个功能的原因是，要写使用两个及以上reducer的方法因为redux只能定义一个store，即一个应用一个store，而store只接收一个reducer，所以这两个reducer不同功能不同数据，需要将这些reducer整合到一起；功能：组件1：store数据：numberstore方法：点击按钮每次加100组件2：store数据：异步请求的...

2020-02-20 22:35:01 312

原创记录报错 react Expected an assignment or function call and instead saw an expression no-unused-expressi

报错：Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error.期望一个赋值或函数调用，却看到一个表达式没有使用表达式搜索关键字以了解每个错误的更多信息。...

2020-02-20 10:02:19 3634

原创 vue vuex 学习小demo

创建store.js引入并使用vueximportVuexfrom'vuex'Vue.use(Vuex)1.使用newVuex.Store创建({}）创建store2.创建state:{}存放数据3.mutations:{}存放方法4.actions:{}用于调用异步方法5.getters:{}用于数据计算import Vue from 'vue...

2020-02-19 22:09:47 243

原创 react todolist 3

功能：1.输入框输入事项，点击add，list增加一条，输入框清空并且聚焦；2.点击当前checkbox，勾选文字为已完成，取消勾选文字为未完成；父组件TodoList.js分成了三个子组件TodoHeader,TodoInput,Listimport React, { Component } from 'react';import{TodoInput,TodoH...

2020-02-19 09:57:44 206

原创 react 渲染富文本中的标签内容

假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面：例：<div>我是富文本内容</div>在标签上使用dangerouslySetInnerHTML={{__html:this.state.article}}import React, { Component } from 'react';class TodoList extends Co...

2020-02-18 17:56:11 6068

原创 react 做一个点赞按钮组件

点击按钮，喜欢或者取消小图标用的是https://emojipedia.org/这个网站的直接复制使用即可创建组件Like.js一开始设置为黑色false，isLiked如果为true渲染红心，false渲染黑心setState时用了两种方法import React, { Component } from 'react'export default cl...

2020-02-18 17:52:13 1511

原创 react 父子传值

创建父组件Demofather.js第一种传值：在子元素标签上 title='待办事项' x={1}字符串可以用" "引号传递数字类型用{}大括号传递子组件标签内部可以传递任何数据，react将自动生成props.children数据import React, { Component } from 'react';import{Demo,Demo2} from '....

2020-02-18 16:01:42 370

原创 react 中使用less

首先 npminstallless-loaderless--save-dev安装之后终端npmruneject来暴露webpack的配置文件，如果报错：Remove untracked files, stash or commit any changes, and try again.这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitigno...

2020-02-18 12:28:54 1854 1

原创 react jsx语法

//调用react下面的createElement方法，传入第一个参数是tag//第二个是属性，第三个是子元素集合import React from 'react'let JsxDemo =( <div className='app'> <h3>hello react</h3> </div>)//...

2020-02-18 08:44:07 75

原创 react hooks useState

react-hooks写法直接用函数形式完成()=>{setCount(count+1)}useState是react自带的一个hook函数，它的作用是用来声明状态变量useState的用法，分别是声明、读取、使用（修改）useState这个函数接收的参数是状态的初始值ReactHooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序例如不能出现以下...

2020-02-18 08:34:08 237

原创 react hooks useReducer

import React, { useReducer } from 'react';function ReducerDemo(){ const [ count , dispatch] =useReducer((state,action)=>{ //判断action类型 switch(action){ case 'add':...

2020-02-18 08:18:33 164

原创 react hooks useContext

父子传值跨层级传值父组件引入并创建createContext，子组件引入useContextimport React, { useState , createContext ,useContext } from 'react';const CountContext = createContext() //创建一个createContextfunction UseContext...

2020-02-18 08:11:32 235

原创 react hooks useEffect

useEffect代替生命周期函数componentDidMount页面加载和componentDidUpdate页面更新//useEffect代替生命周期函数 componentDidMount页面加载和componentDidUpdate页面更新import React, { useState,useEffect } from 'react';function UseEffec...

2020-02-18 08:05:31 229

原创 react Refs使用

//Refs使用，绑定dom元素，ref 不能设置在无状态组件上//不要在 render 或者 render 之前访问 refsimport React, { Component } from 'react';class Refsdemo extends Component { constructor(props) { super(props); ...

2020-02-17 20:16:52 356

原创 react 按条件渲染内容

//按条件渲染内容 && 数组大于0时，渲染import React from 'react'//判断数组length大于0时，渲染未读消息//0条时不渲染未读消息function Choice() { const messages = ['React', 'Re: React', 'Re:Re: React']; return ( ...

2020-02-17 20:12:25 363

原创 react 跟踪表单的值

//跟踪表单的值import React, { Component } from 'react';class FlavorForm extends Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChan...

2020-02-17 20:10:10 177

原创 react 路由小案例

父组件AppRouterimport React from 'react'//BrowserRouter as Router 给BrowserRouter起名Router 方便使用import {BrowserRouter as Router, Route, Link} from 'react-router-dom'import Index from './Index'i...

2020-01-16 13:45:39 233

原创 vscode常用快捷键总结

Ctrl+Shift+P,F1 展示全局命令面板Ctrl+P 快速打开最近打开的文件Ctrl+Shift+N 打开新的编辑器窗口Ctrl+Shift+W 关闭编辑器Ctrl + X 剪切Ctrl + C 复制Alt + up/down 移动行上下Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift + K 删除行Ctrl + E...

2020-01-06 16:50:16 771

原创 vue 配置baseurl

config文件夹下新建global.jsconst BASE_URL = 'http://xxxxxxx'export default { BASE_URL}main.js添加到全局import global_ from '../config/global'Vue.prototype.GLOBAL = global_;组件里使用： created() {...

2020-01-02 10:27:53 1041

原创 vue 移动端无限瀑布流插件使用

瀑布流插件：importwaterfallfrom'vue-waterfall2'Vue.use(waterfall) <div class="seat_box"> <div class="seat_background" v-bind:class="{ seat_background2: isChoose }"></d...

2019-12-27 15:02:24 1748

原创 vue 表单单选切换样式

<div class="form_input"> <span>性别</span> <label class="sex sex1" v-bind:class="{ active: isChoose1 }"><input name="sex" type="radio" value="m" v-model=...

2019-12-27 13:40:38 552

原创 vue 设置整屏背景色音乐播放

<template> <div class="gif">  <div @click="close" class="close"> <i class="iconfont icon-shengy...

2019-12-27 11:26:46 390

原创 ts 数组的类型

let fibonacci: number[] = [1, 1, 2, 3, 5];//数组的项中不允许出现其他的类型：// let fibonacci: number[] = [1, '1', 2, 3, 5]; 报错//一个比较常见的做法是，用 any 表示数组中允许出现任意类型：let list: any[] = ['xcatliu', 25, { website: 'ht...

2019-12-26 17:08:51 3442

原创 ts数据类型

//数据类型//我们用 : 指定 person 参数类型为 stringfunction sayHello(person: string) { return 'Hello, ' + person;}let user = 'Tom';console.log(sayHello(user));//tsc hello.ts 编译后会自动生成对应的js文件//在 TypeS...

2019-12-26 17:07:58 469

原创 ts 学习1

npminstall-gtypescriptvscode写ts文件报错：tsc-init会在目录下生成一个tsconfig.json文件可识别.ts文件编译一个TypeScript文件很简单：tschello.ts 编译后会自动生成对应的js文件用TypeScript编写React时，以.tsx为后缀ts报错时，编译后也可生成js文件，如...

2019-12-26 17:06:47 302

原创 ts 日期对象

//不传参let d:Date = new Date()//传递一个整数let b:Date = new Date(1000) //从1970往后数1秒

2019-12-26 17:00:02 1844

原创 ts 联合类型

//联合类型（Union Types）表示取值可以为多种类型中的一种。let myFavoriteNumber3: string | number;myFavoriteNumber3 = 'seven';myFavoriteNumber3 = 7;//当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，//我们只能访问此联合类型的所有类型里共有的属性或方法：...

2019-12-26 16:55:35 1629 1

原创 ts 类型推论

//类型推论//TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论// let myFavoriteNumber = 'seven';// myFavoriteNumber = 7; 会报错//如果定义的时候没有赋值，//不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：let myFavoriteNumber2;my...

2019-12-26 16:52:35 848

空空如也

空空如也