qq_39008205的博客

我们说一下时间段交叉校验，validatorr: async (rule, value) =>{} 用于自定义校验规则，然后使用Promise去返回校验响应。rule中包含着当前字段field,其中包含着当前字段(时间选择器)的索引值，value是我们当前时间选择器中选中的时间。如下当检验函数返回true 我们会进行提示每个”购买时间段之间不可时间交叉“(这里用到Promise.reject)。中的所以时间段比较(但是不要和其自身比较)，所以收集一下当前选中的时间选择器的索引值。

前言✋???? 先，说一下我为什么发这么一篇文章。一个月前刚用过react的路由插件。当时用了之后也没有什么报错。然后今天用，遇到了好多问题。后来才发现是更新了版本，好多用法都改变了。所以想写篇文章梳理一下，同时也让能看到这篇文章的 ???? ???? 们，少百度一些报错。我去npm官网看了下react-router-dom的发布版本，在最近一个月内一直在改动着。遇到的报错❌ 1.在使用 <Switch>时，报错如下：import logo from './logo.svg';i

首先上一段代码class Time extends React.Component{ state = {date:new Date()} componentDidMount(){ setInterval(()=>{ this.setState({ date:new Date() }) },1000) } render(){ return(

目录1. 挂载阶段2. 更新2.1 setState2.2 forceUpdate3. 销毁首先，我们通过一个例子来引出：计数器1. 挂载阶段constructor 构造器componentWillMount 将要挂载componentDidMount 挂载完毕render 渲染我们在每个生命周期的钩子中都 打印一下，看他们的执行顺序。class Count extends React.Component { constructor(props) { conso

例子：点击按钮，文字从0变为1，再从1变为0点击按钮，让组件消失给按钮加点击事件卸载组件 API：unmountComponentAtNodeclass Life extends React.Component{ // 挂载：mount // 卸载：unmount leave = ()=>{ // 卸载 ReactDOM.unmountComponentAtNode(document.getElementById('root'))

这里写目录标题1. 引入合并方法2. 高阶函数更改回调存入状态对象复习高阶函数函数的柯里化1. 引入首先上篇文章的代码class Login extends React.Component{ state ={ username:'', password:'' } handleSubmit = (event)=>{ event.preventDefault() // 阻止提交 const {username,p

目录1. 非受控组件2. 受控组件1. 非受控组件页面所有输入类的DOM，现用现取就是非受控组件。form 提交触发handleSubmit方法form中有两个输入项 ，用到回调函数ref ，并添加name属性handleSubmit方法 阻止页面跳转 ，并弹出提交的用户名和密码class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() // 阻止提交

目录1. 字符串形式的ref点击按钮获取输入框数据失去焦点提示数据总结2. 回调形似的ref回调执行次数问题关于回调 refs 的说明内联的写法class 的绑定函数的写法3. CreateRef1. 字符串形式的ref首先这种形式是不推荐使用的。过时 API：String 类型的 Refs：如果你之前使用过 React，你可能了解过之前的 API 中的 string 类型的 ref 属性，例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。我们不

目录1. 简单组件和复杂组件2. state2.1 创建组件2.2 添加构造器2.3 添加变量/属性2.4 改变state值 setState1. 简单组件和复杂组件简单组件：无 state复杂组件：状态 state那么什么是状态呢？#mermaid-svg-RmcbJBhPT67yj2fF .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;colo

创建一个类class MyComponent {}那么 现在可以说他跟React毫无关系。那么怎么让他和React有关系那？让他继承自React就好了class MyComponent extends React.Component{}构造器 不需要写，官方也没写。render()必须写// 1.创建类组件class MyComponent extends React.Component{ render(){ return <h2>我是用类定义的

目录1. 创建一个类2. 给类传参数3. 一般方法4. 类的继承4.1 不写构造器4.2 什么时候需要构造器4.3 调父类方法4.4 重写父类方法5. 总结：1. 创建一个类<script> // 创建一个Person类 class Person{ } // 创建一个Person的实例对象 const p1 = new Person(); console.log(p1) </script>红色的

目录1. 函数式组件1.1 创建函数式组件1.2 react dev tools1. 函数式组件1.1 创建函数式组件我们就先写个函数然后将它渲染到界面// 1.创建函数式组件function demo(){ return <h2>我是函数式组件，适用于简单的定义</h2>}// 渲染组件到界面ReactDOM.render(demo, document.getElementById('root'))界面是空白页，并且它报错说不是标签，那么我们给它改成组

目录1. 模块2. 组件3. 模块化4. 组件化1. 模块向外提供特定功能的 js 程序，一般就是一个 js 文件。为什么要拆成模块：随着业务逻辑增加，代码越来越复杂。作用：复用 js ，简化 js 的编写，提高 js 的运行效率。模块全称：js模块，只是拆分 js2. 组件理解：所有实现头部功能的 html css js font img video等文件。为什么：因为一个页面的功能很复杂。作用：复用编码，简化项目编码，提高运行效率。3. 模块化当应用的 js 都以模块来编写的

目录1. jsx了解2. jsx语法规则3. jsx小练习1. jsx了解全称：JavaScript XMLreact定义的是一种类似于 XML 的 JS 扩展语法 JS + XML本质是 React.createElemet() 的一种语法糖???? 了解一下XML 早期用于存储和传输数据（结构比数据多）<Student> <name>Tom</name> <age>18</age></Student>

目录1.js创建虚拟DOM2. jsx创建虚拟DOM问题：为什么React要推出 jsx ？js语法怎么创建虚拟DOM ？接下来我们分别用 js 和 jsx 创建一个span标签中包裹Hello React的小例子1.js创建虚拟DOM怎么创建DOM？document.createElement()怎么创建虚拟DOM？创建DOM需要document对象，那么要想创建虚拟DOM就得需要ReactReact.createElement()三个参数：（标签名,标签属性,标签内容）

目录1. 创建基础项目1.1 创建文件夹并进入1.2 创建项目1.3 运行1.4 使用ProLayout2. 创建ProLayout完整模版2.1 创建前准备1. 创建基础项目1.1 创建文件夹并进入mkdir myapp && cd myapp1.2 创建项目安装yarn请跳转yarn create @umijs/umi-app# 或 npx @umijs/create-umi-app npx是react在npm内置的创建完成1.3 运行首先需要更新一下依赖（

目录1. 生命周期概述2. 生命周期三个阶段2.1 创建时（挂载阶段）2.2 更新时2.2.1 有三种形式会更新render()2.2.2 componentDidUpdate()钩子1. 生命周期概述意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件的错误原因。组件的生命周期：组件从创建到挂载到页面中运行，再到组件不用时卸载的过程。生命周期的每一个阶段都是伴随一些方法调用，这些方法就是生命周期的钩子函数。钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。只有类

目录1. children1.1 子节点的三种形式1.2 总结2. props校验2.1 为什么 要校验2.2 校验的使用2.3 约束规则3. props的默认值1. childrenchildren属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性。function Hello(props){ return( <div> {props.children} </div> )}<Hello>我是子节点</Hello

思考：App组件要传递数据给Child组件，该如何处理？处理方式：使用props一层层组件往下传递（繁琐）更好的办法：使用Context作用：跨组件传递数据（比如：主题、语言）。直接从App组件传递到Child使用步骤：调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件const {Provider,Consumer} = React.createContext()使用Provider组件作为父节点

这里写目录标题1.渲染评论列表2. 渲染暂无评论3. 获取评论信息4. 发表评论5. 完善5.1 清空文本框内容5.2 发布为空时提示6. 完整代码1.渲染评论列表在state中初始化评论列表数据使用数组的map方法 遍历state中的列表数据给每个被遍历的li元素添加key属性数据如下 state = { comments: [ { id: 1, name: 'jack', content: '沙发！！' }, { id: 2, name: 'rose',

这里写目录标题1. 事件绑定2. 事件对象3. 有状态组件和无状态组件4. 组件中的state 和setState()4.1 state的使用4.2 setState()修改状态4.3 从JSX中抽离事件处理程序5. 事件绑定this指向5.1 箭头函数5.2 Function.prototype.bind()5.3 class的实例方法 （推荐使用）6. 表单处理6.1 受控组件6.2 非受控组件1. 事件绑定React事件绑定语法与DOM事件语法相似如法：on+事件名称 = {事件处理程序}

这里写目录标题1.组件介绍2. 组件的两种创建方式2.1 使用函数创建组件2.2 使用类创建组件2.3 抽离为独立的JS文件1.组件介绍使用React就是在使用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合2. 组件的两种创建方式2.1 使用函数创建组件使用js的函数（箭头函数）创建的组件约定1：函数名称必须以大写字母开头             如果是小写字母开头则

这里写目录标题1. JSX的基本使用1.1 createElement()存在的问题1.2 JSX简介1.3 使用步骤1.4 脚手架中为什么能直接写JSX语法？1.5 注意点2. JSX中使用Javascript表达式2.1 嵌入JS表达式2.2 注意点3. JSX的条件渲染4. JSX的列表渲染5. JSX的样式处理5.1 行内样式 style5.2 类名 className(推荐)1. JSX的基本使用1.1 createElement()存在的问题繁琐不简洁不直观，无法一眼看出所描述的结构

这里写目录标题1. React脚手架的意义2. 使用脚手架初始化项目2.1 初始化项目，命令：2.2 运行 命令：2.3 找到index.js文件3.说明1. React脚手架的意义脚手架是开发现代Web应用的必备充分利用Webpack、Babel、Eslint等工具辅助项目开发零配置，无需手动配置繁琐的工具即可使用关注业务，而不是工具配置2. 使用脚手架初始化项目2.1 初始化项目，命令：npx 命令介绍npm v5.2.0 引入的一条命令。目的：提升包内提供的命令行工具的使用体

1.是什么？React是用于构建用户界面的Javascript库。React主要用来写HTML页面或者构建Web应用。如果从MVC的角度来看，React仅仅是视图层（V），负责视图的渲染。React起源于FaceBook内部项目。2.React的特点？2.1 声明式（跟HTML一样就是在描述一个结果）React去负责UI渲染，并在数据变化时更新。const jsx = <div className="app"> <h1>Hello React {count}&l