React
关注
分享
扫一扫
天蒙蒙亮
这个作者很懒，什么都没留下…
展开
-
React解决require地址中引用变量的问题
const context = require.context("@/assets/picture/", true, /\.(png|jpg)$/);const image = context(`./${i}.jpg`)<img src={image} alt="">原创 2024-08-05 23:19:25 · 187 阅读 · 0 评论 -
React 中实现拖拽功能-插件 react-beautiful-dnd
拖拽原创 2024-02-04 07:22:38 · 1443 阅读 · 0 评论 -
发布订阅模式的应用：解决react中复杂层级的数据交互
这种情况往往是不知道跨越多少不同层级的情况。以自定义事件为调度中心，创建一个。：商品加入购物车的操作。原创 2024-02-02 08:00:16 · 533 阅读 · 0 评论 -
正则使用.
1.请编写js函数，该函数将一个骆驼命名的变量标识符，修改成下划线命名。如："testAddOrEdit"->"test_add_or_edit"functionfn(str){returnstr.replace(/([A-Z])/g, "_$1"),toLowerCase()；//()有什么作用呢?"testAddOrEdit".replace(/([a-z])[A-Z])/g,"$1_$2")注意：这里有$0\$1\$2...,这是由于表达式有（），表达式有子表达式。因为有3个子...原创 2022-03-20 17:05:44 · 611 阅读 · 0 评论 -
React全局变量
React全局变量原创 2022-10-18 00:40:16 · 3206 阅读 · 0 评论 -
js获取当前浏览器窗口大小；修改url地址，但不刷新页面。
获取当前浏览器窗口大小.原创 2022-10-18 00:18:58 · 887 阅读 · 0 评论 -
js页面滚动，设置锚点，控制页面滚动到某个节点位置
页面滚动，设置锚点原创 2022-10-17 23:51:30 · 5306 阅读 · 0 评论 -
前端免安装Nginx 部署
前端不安装Nginx情况下部署原创 2022-06-29 08:31:59 · 1252 阅读 · 0 评论 -
事件冒泡 + 拖拽 + 图片懒加载 + 生命周期演示
1.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 表单,设置默认值</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script sr原创 2020-09-20 01:55:18 · 385 阅读 · 0 评论 -
修改 hosts文件
1.找到c盘这个目录：C:\Windows\System32\drivers\etc2. mac系统 打开终端（应用程序——实用工具），运行： sudo vi /etc/hosts原创 2020-03-04 20:15:31 · 183 阅读 · 0 评论 -
react-native ERROR EPERM: operation not permitted报错解决
http://blog.youkuaiyun.com/zone_dream/article/details/77980397ERROR EPERM: operation not permitted, lstat '路径'{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"...\.idea\\workspace.xml___jb转载 2018-03-15 11:02:32 · 2402 阅读 · 0 评论 -
React 组件生命周期
React的组件拥有简洁的生命周期API，它仅仅提供你所需要的方法，而不会去最求全面。实例化：一个实例出吃被穿件时所调用的生命周期方法与其他哥哥后续实例被创建所调用的方法略有不同。当你首次使用一个组建类时，会看到下面这些方法依次被调用：getDefaultPropsgetInitialStatecomponentWillMountrenderComponentDidMO...转载 2018-09-17 10:55:50 · 149 阅读 · 0 评论 -
React入门教程
转载： https://blog.youkuaiyun.com/Bupt_Lili/article/details/780270821. React的起源 2. React的特点 2.1 虚拟DOM 2.2 组件化思想 2.3 JSX语法 3. 创建第一个React项目 3.1 环境要求 3.2 创建一个可执行的React项目 4. 增加一个React组件 5. React...转载 2018-09-16 18:42:44 · 302 阅读 · 0 评论 -
Element type is invalid: expected a string (for built-in components) or a class/function
报错：Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component ...原创 2018-09-05 15:45:09 · 25381 阅读 · 1 评论 -
componentWillMount 和 componentDidMount的区别
一、 调用时期不同转自：https://www.cnblogs.com/xyn0909/p/8516074.html1、componentWillMount 将要装载，在render之前调用； componentDidMount，（装载完成），在render之后调用2、componentWillMount 每一个组件render之前立即调用； compo...原创 2018-09-04 09:51:16 · 82252 阅读 · 3 评论 -
React中的ref
在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。ref 简介React提供的这个ref属性，...转载 2018-08-01 16:09:17 · 971 阅读 · 0 评论 -
React项目中使用 jQuery的 ajax进行异步请求操作
import React, { Component} from 'react';import $ from 'jquery';import Cropper from 'react-cropper';//import 'cropperjs/dist/cropper.css';import styles from 'cropperjs/dist/cropper.css';class C...转载 2018-07-21 09:18:43 · 2798 阅读 · 0 评论 -
react请求接口数据是在componentDidMount 还是componentWillMount周期好？
转载：https://www.zhoulujun.cn/html/webfront/ECMAScript/jsBase/2018_0427_8104.html对于同步的状态改变，是可以放在componentWillMount，对于异步的，最好好放在componentDidMount。但如果此时有若干细节需要处理，比如你的组件需要渲染子组件，而且子组件取决于父组件的某个属性，那么在子组件的com...转载 2018-09-24 23:34:30 · 8828 阅读 · 3 评论 -
重谈react优势——react技术栈回顾
react刚刚推出的时候，讲react优势搜索结果是几十页。现在，react已经慢慢退火，该用用react技术栈的已经使用上，填过多少坑，加过多少班，react刚刚推出的时候，讲react优势搜索结果是几十页。现在，react已经慢慢退火，该用用react技术栈的已经使用上，填过多少坑，加过多少班，血泪控诉也不下千文。今天，再谈一遍react优势，WTF？React的收益有哪些？R...转载 2018-09-24 23:44:27 · 316 阅读 · 0 评论 -
一份react 面试题
声明：题目是群里面看到的，并不完全。答案自己手撸1、下面打印出b的值是？if(true){let b = 2} alert(b).let不存在变量提升，且作用域只在代码块，输出undefined2、const name = 'jack'; const age = 20; const person = {[name] : true, [age] : true}. person对象的两...转载 2018-09-24 23:58:05 · 8340 阅读 · 2 评论 -
在React中使用 Redux
转载：https://www.jianshu.com/p/06f5285e2620这是Webpack+React系列配置过程记录的第六篇。其他内容请参考：第一篇：使用webpack、babel、react、antdesign配置单页面应用开发环境 第二篇：使用react-router实现单页面应用路由 第三篇：优化单页面开发环境：webpack与react的运行时打包与热更新 第四篇...转载 2018-09-14 14:10:26 · 2514 阅读 · 0 评论 -
javascript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别？
我当时想的就是：这个问题很简单啊~（flag），然后做出了错误的回答……箭头函数中的this 和调用时的上下文无关，而是取决于定义时的上下文，一旦定义，this就不会改变。这并不是很正确的答案……虽然也不是完全错误。箭头函数中的 this首先说我的回答中没有错误的部分：箭头函数中的 this 确实和调用时的上下文无关function make () { return ...转载 2018-09-19 16:48:42 · 1335 阅读 · 0 评论 -
阮一峰的网络日志地址
1. Generator 函数的含义与用法：什么是异步？ http://www.ruanyifeng.com/blog/2015/04/generator.html2. 箭头函数使用的注意点http://es6.ruanyifeng.com/#docs/function#箭头函数 3. Redux 入门教程（一）：基本用法: Store 就是保存数据的地方，你可以把它看...原创 2018-09-15 13:58:49 · 388 阅读 · 0 评论 -
React 高级组件
原文转载地址：http://www.karmagut.me/?p=549本文将探讨如何构建更易于复用，更为灵活的React高级组件。在实际的应用开发中，多个React组件之间可能需要共用一段完成某些特定功能的代码，那么如何在不同的组件间复用这段代码就成了一个值得思考的问题（或者说，如何创建具有类似功能的，不同的React组件）。在JavaScript的世界中，函数是第一等的公民，既能够...转载 2018-09-25 20:58:52 · 824 阅读 · 0 评论 -
react 生命周期调用过程。
1.触发过程。原创 2018-10-05 21:15:04 · 320 阅读 · 0 评论 -
hook使用记录
最近有前端项目使用了hook，就使用中遇到的问题总结。1. hook中没有了this的概念，因此在遇到触发事件函数要传递参数时，要写成匿名函数的形式(因为传参数时没有了事件绑定bind这个方式)。2. 组件销毁时，可在其匿名函数的形式中重置组件的store里的状态。3. useEffect函数使用时，后面要带个参数，表示参数变化时才会再次执行。若不带参数，会形成死循环。4. 若ho...原创 2019-09-29 02:24:38 · 483 阅读 · 0 评论 -
antd的表格拖拽排序, 报错:React.createContext is not a function
在使用 antd的表格拖拽排序功能时, 报错: React.createContext is not a function分析原因:https://zhuanlan.zhihu.com/p/34038469解决办法:1. 升级antd的版本 //下载固定版本 npm报错，不指定版本OK。2. 升级 react的版本"react": "^1...原创 2018-07-19 16:59:43 · 7991 阅读 · 3 评论 -
React 的组件的 key
react key概述key的作用react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不...转载 2018-07-06 15:44:29 · 3279 阅读 · 0 评论 -
React关于form的取部分字段数据
1.获取表单的所有数据this.props.form.validateFieldsAndScroll((err, values) => { if(err){ return; } console.log('_values', values);});2. 获取表单的部分字段数据this.props.form.validateFieldsAndScroll([`timeUni...原创 2018-03-28 15:15:27 · 5080 阅读 · 0 评论 -
React投票小程序，区分事件源。
情况：多个按钮，对应一个函数时，要区分是哪个按钮发出的事件源。import React from 'react'import { render } from 'react-dom'import { Card, Grid, Checkbox, Flex, Button, WingBlank } from 'antd-mobile';const CheckboxItem = Checkbox.Chec...原创 2018-03-28 13:27:17 · 708 阅读 · 0 评论 -
react开发中常见的 warning
1. 某属性的类型无效。Warning: Failed prop type: ButtonContainer: prop type `inline` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.原码： 2. Warning: Fail...原创 2018-04-10 10:59:49 · 5125 阅读 · 1 评论 -
引入AntDesign组件库
https://blog.youkuaiyun.com/awaw00/article/details/54945528我们的管理系统已经有了图书、用户的增删改查以及登录功能了，可谓是五脏俱全，就是丑了点~是不是已经有些厌倦我们系统里的白底黑字和灰色框框了？打起精神，本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI！安装组件库在项目目录下执行：npm i antd -S 安装组件包执行：np...转载 2018-03-27 14:59:54 · 4042 阅读 · 1 评论 -
React的轮播
import React from 'react';import { Form, Icon, Input, Button, Checkbox,Select,Radio } from 'antd';import { Router, Route, Redirect, hashHistory, Link } from 'react-router'; //引入路由标签,default关键字修饰，所以要{...原创 2018-03-27 14:56:57 · 750 阅读 · 0 评论 -
react 的组件一级一级往外抛出的结构
如：组件一级一级抛出, （为了显现组件的出处）1. 一级目录抛出2. 二级目录抛出3. 在其他 复合组件中调用原创 2018-04-08 11:51:01 · 474 阅读 · 0 评论 -
React 版本16以后，PropsTyple被独立出来了。
import PropTypes from 'prop-types';原创 2018-03-29 23:56:17 · 524 阅读 · 0 评论 -
react 表格的分页、排序、筛选的触发函数。
//触发函数//分页参数//table原创 2018-02-27 14:55:55 · 4623 阅读 · 1 评论 -
npm 常用命令详解
目录npm是什么npm install 安装模块npm uninstall 卸载模块npm update 更新模块npm outdated 检查模块是否已经过时npm ls 查看安装的模块npm init 在项目中引导创建一个package.json文件npm help 查看某条命令的详细帮助npm root 查看包的安装路径npm config 管理npm的配置路径npm cache 管理模块的...转载 2018-02-24 14:43:25 · 354 阅读 · 0 评论 -
react 项目中引入js连接资源。
1. 在 html文件里引入脚本资源。2.找到 .roadhogrc 这个文件。打开编辑声明对象。引用于：https://www.npmjs.com/package/roadhogexternalsConfigure webpack's externals property.e.g.// Don't pack react and react-原创 2018-01-29 09:58:13 · 11918 阅读 · 0 评论 -
React项目开发过程经常报错之处。
报错一：文件上传，文件路径为对象。(1).判断上传如果是对象，则取对象中的路径属性，赋值上传。(2). 限制文件上传大小，判断文件大小后，再上传。报错二：文本域字数限制。(1). 限制文字个数，判断字符串长度。原创 2018-01-31 10:30:09 · 268 阅读 · 0 评论 -
搭建一个react项目
从头开始建立一个React App - 项目基本配置npm init 生成 package.json 文件.安装各种需要的依赖:npm install --save react - 安装React.npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装rea转载 2018-01-03 10:23:49 · 300 阅读 · 0 评论