weixin_43709908的博客

js部分/** * 滑动删除 */import React from "react"; import "./index.less"; class SlideDelete extends React.Component { constructor(props) { super(props); this.state = { width:0, isShow:false }; }

index.jsx 页面import React, { Component } from 'react';import classname from 'classnames';import './SliderTabs.less';import unSelected from '未选中图片路径'import Selected from '选中图片路径'class SliderTabs extends Component { constructor(props) { super(p.

jsximport React, { Component } from 'react';import { Document, Page } from 'react-pdf/dist/entry.webpack';import 'react-pdf/dist/Page/AnnotationLayer.css';import envconfig from "@/envconfig/envconfig"import './PDFView.less';import { getSearchQueryS

我们在会遇到这种tab特别多的情况，需要点击/滑动选择，这个时候就可以使用这个滑动栏。tabs代码块：import React, { Component } from "react"import './ModeTabs.less'/** * 模式TAB组件 * * props: * datas = {[{title: '',}, {title: '',}]} * activeTab = {0} * type={0} 默认不传，为默认样式，传1则为第二种样式，选中时字体为下划...

/** * 可预览图片 ++水印 名字 部门 当前时间 */import React, { Component } from 'react';import { ImagePicker } from 'antd-mobile';import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'import envconfig from "@/envconfig/envconfig";import Carousel.

// FastClick.attach(document.body);//绑定事件判断绑定事件// 解决引入fastClick 导致antd中upload ios 点击两次生效问题 shangshunli 2021/07/02 --上传附件try{ let versionNumber = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, ".") .

/** * 可预览图片 */import React, { Component } from 'react';import { ImagePicker } from 'antd-mobile';import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'import envconfig from "@/envconfig/envconfig";import Carousel, { ModalGateway, Mo.

在react项目当中使用城市选择器，import React from 'react'import './index.less'import { Picker } from 'antd-mobile';// 城市选择器class CitySelect extends React.Component{ static defaultProps = { label: '', name: '', value: '', readO.

1.去高德地图开放平台去注册，获得自独一无二的key值<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 2.准备一个div的盒子作为地图属性，并为该div指定id属性<div id="container"></div> 3.加载页面自动根据ip获得当前所在位置let mapObj = new A

因为为了适应自己项目的需要进行了相应的修改效果图是这样的代码import { List } from "antd-mobile"; //导入<List> <List.Item> <span className="required-mark">*</span> 问题名称:

import React, { Component } from 'react'export default class Mouse extends Component { state = { x: 0, y: 0 } componentDidMount() { window.addEventListener('mousemove', this.handleMouseMove) } componentWillUnmount() { window.r

今天晚上公司的大佬给我们这些菜鸟进行了技术分享，收获了很多，希望以后能够得到更多的分享。转入正题：新建一个文件夹myReactApp，并初始化项目 npm init切换到我们的文件夹当中 cd myReactApp1.安装依赖安装react库npm i react react-dom下一步安装babel，webpack# babel依赖npm i @babel/core @babel/preset-env @babel/preset-react# proposal-class-pr

先看一下要做的效果如上图所示，箭头所指示的就是我们要进行的点标记，先说一下我做的这个步骤1.上图所指示的坐标当时是用墨卡托坐标，要将其转成高德地图坐标表示的经纬度的形式，才能在高德地图中表示出来所指示的地点。墨卡尔托坐标表示形式：12738037.307083402,3562717.500125364就是上面这个坐标进行相应的点标记。首先我们要对当前坐标进行相应的转换，转变成我们想要的坐标，供我们在下面调用进行使用。转换方法：// 转换坐标 MercatorWeblonLat ()

有时候我们想要改变className中的类名，我们可以在className调用方法通过返回值去修改类名，以及使用三元表达式进行判断对类名进行相应的改变。

在移动端我们经常会用到点击复制号码按钮将当前号码进行复制解决方案：1.我们在复制号码这个添加一个点击按钮，同时在点击的时候将当前号码作为参数传递过来2.在点击方法里面接收传递过来的想要复制的号码，在号码复制过来之后，我们会在当前页面添加一个input输入框，并将当前号码作为输入框的value值。具体代码此时是当点击复制号码之后调用的事件copyNumber = (number) => { let transfer = document.createElement('input');

将城市名称按照首字母进行分类，使用js-pinyin包，首先第一步下载包npm i js-pinyinimport React,{Component} from 'react'import pyjs from 'js-pinyin' //包下载完成之后在要使用的页面进行引入const cityList=[ { value:'北京', label:'北京' }, { value:'上海', label:'

1.先下载swiper包npm install swiper -S2.在下载完成之后，在想要使用的页面引入swiperimport Swiper from "swiper"同时还要将swiper的样式进行引入，我当时搜索网上的都是将css和swiper在同一个页面进行引用，但是我的在页面是没有进行引入的，或者说只是在public文件夹里面的index.html文件进行了css的相关引入。3.就是在使用的地方进行使用<div class="swiper-container">

话不多说，用代码说话useContext主要用于函数组件之间传值的问题1.首先要进行导入createContext,useContextimport React,{useState,createContext,useContext} from 'react'function Child(){//在子组件中使用useContext进行接收父组件传递的上下文，这样值就能传递过来了 const count1=useContext(CountContext) return (

今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题，上网查了一下，大佬们都推荐使用css IN JS简单介绍一下自己的使用：come on baby介绍：css in js是使用js编写css统称，用来解决css样式冲突，覆盖等问题css in js 的具体实现有50多种，其中两种是比较出名的：css modules和styled-components在r...

在react中封装能够进行复用的组件，实现在多个页面都能够使用，减少了我们书写的代码量。我举一个例子来进行说明1.顶部导航栏在我们做项目时经常性遇到，将顶部的导航栏封装成一个能够复用的组件2.我们使用的是antd-mobile组件库中的NavBar组件下面我们来开始进行封装import React from 'react'导入高阶组件import {withRouter}...

这是我的目录文件夹结构在App.js中进行路由配置的使用 // 导入路由模块import { BrowserRouter as Router, Route, Link,Redirect } from 'react-router-dom'// 导入要展示的组件页面import Home from './pages/Home'import CityList from './pa...

1.你首先先要注册一个百度账号，申请成为百度开发者，这样你就可以获得一个百度服务秘钥（ak）2.记录好你自己的ak号，因为在你是用百度api的会使用到3.在public中的index.html中进行引入百度api的文件<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密...

1.在使用antd的Carousel组件时，轮播图刚开始不会进行自动轮播，并且在从其他页面跳转到当前页面时，轮播图展示不完全的问题原因：轮播图数据是动态加载的，加载完成前后轮播图数量不一致解决方案：1.在state中添加表示轮播图加载完成的数据2.在轮播图加载完成时，修改该数据状态值为true3.只有轮播图数据加载完成的情况下，才渲染轮播图组件4.闪动问题，是将轮播图放在一个d...

首先打开antd-mobile的官方文档 在项目中安装antd-mobile 使用 npm install antd-mobileyarn add antd-mobile 在项目中App.js文件中导入要使用的组件 import {Button} from 'antd-mobile'使用组件直接在组件中进行使用即可import { Button } from 'a...

现代前端大多数都是SPA（单页面程序），也就是只有一个HTML页面的应用程序，因为它的用户体验更好，对服务器压力更小，所以更受欢迎，为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端 路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系 使用React路由简单来说，就是配置路径和组件路由的基本...

纯组件的作用：内部自动在shouldComponentUpdate钩子函数中帮我们进行了比对，不需要我们手动来进行比对使用方法：之前我们使用组件都是继承React.Component，而我们想要使用纯组件的话，只需要继承React.PureComponent即可。纯组件内部的对比是shallow compare（浅层对比）两种类型 值类型：比较两个值是否相同 引用类型：只比对对象引用地...

如何实现不必要的重新渲染：通过生命周期的钩子函数sholdComponentUpdate（）进行判断是否进行更新渲染，这个钩子函数在render（）方法调用之前调用，如果该钩子函数的返回值为true，代表需要重新渲染，如果为false，代表不需要重新渲染。这个是在父组件中直接进行state的比较是否进行了更新import React from 'react'import React...

更新数据：setState（）更新数据 是异步的 注意：使用该语法，后面的setState不要依赖前面setState的值 多次调用setState，只会触发一次render推荐使用语法：使用setState（（state，props）=>{}）语法，这个语法实际上也是异步的语法，只不过此时获得值都是最新的值 参数state，表示最新的state 参数props，表示最新的...

高阶组件：目的：实现状态逻辑复用高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent使用步骤：创建一个函数，名称约定以with开头 指定函数参数，参数应该以大写字符开头 在函数内...

1.创建公共的复用组件2.在复用组件的render方法直接返回 this.props.children（this.state）3.在使用组件的地方回调函数的参数就是children的值import React from 'react'import ReactDOM from 'react-dom'/* render props 模式*/import PropTypes...

1.组件生命周期的作用组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能，分析组件错误原因等2.什么是钩子函数生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数组件生命周期的三个阶段1.创建阶段执行时机：组件创建时（页面加载）执行函数：constructor,render,componentDidMount执行顺序：construc...

props的深入了解1.props的children属性children属性：表示组件标签的子节点，当组件标签有子节点时，props就会有该属性 children属性和普通的props一样，可以是任意值（文本，react，元素，组件，甚至是函数） 注：当前组件包含内容的情况下，在render方法中return回去的组件不会包含在内props的children属性const App...

如果两个组件相隔层级比较多，可以使用Context实现组件数据的传递 Context提供了两个组件，Provider和Consumer Provider提供数据 Consumer消费数据，也就是接收数据使用步骤：1调用React。creatContext（）创建Provider（提供数据）和Cunsumer（消费数据）两个组件2.使用Provider组件作为父节点3.设置val...

1.父组件向子组件传值父组件要提供想要传递给子组件的数据 给子组件添加属性。属性值为父组件中state中要传递的数据 子组件通过props接收父组件传递过来的数据 关于父子组件之间的传递// 父组件// class Parent extends React.Component{// // 1.父组件中定义要传递的值// state={// na...

class Hello extends React.Component{ constructor(){ super()利用react提供的React.createRef() this.ref=React.createRef() this.state={ txt:'' } this.getValue=(e)=>{ this...

1.给每个表单元素添加一个name属性2.name属性的值要和state中的状态值保持一致3.使用同一个事件处理程序class Hello extends React.Component { state = { txt: '', content:'', addresss:'zk', isChecked:true }handleForm=(e)...

{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.2.0" }, "scripts": { "start": ...

1.明白React是构建用户界面的JavaScript库2.使用react时，推荐使用脚手架方式，搭建react的开发项目3.在搭建react脚手架搭建自己的项目时，初始化项目命令：npx create-react-app 自己的项目名4.在使用脚手架搭建好项目时，要使用npm start 命令启动自己的项目5.在react项目中使用React.createElement()方法创...