react
关注
分享
扫一扫
@Programmer
这个作者很懒，什么都没留下…
展开
-
react中通过状态控制元素显示隐藏的三种方法
React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue 中的v-show。第三种是通过动态切换className。第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。class Demo extends React.Component{ constructor(props){原创 2021-09-16 18:49:09 · 1550 阅读 · 0 评论 -
react+typescript（移动端）
这是js+html的代码import React, { Component, createRef } from "react";import './index.less'interface Props {}interface State {}class Drag2 extends Component<Props, State>{ startX: number = 0 startY: number = 0 X: number = 0 Y原创 2021-09-16 17:30:18 · 139 阅读 · 0 评论 -
react+typescript 写拖拽 （pc端)
这是js和html的代码import React, { Component,createRef } from "react";import './index.less'interface Props{}interface State{}class Drag extends Component<Props,State>{ disX:number = 0 disY:number = 0 X:number =0 Y:number =0 drag=c原创 2021-09-16 17:14:58 · 112 阅读 · 0 评论 -
解决react配置完antd-Moblie后less失效的问题
1.在项目根目录配置一个config-overrides.js2.在config-overrides.js文件内写入const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobi.原创 2021-09-16 11:00:29 · 391 阅读 · 0 评论 -
使用react-app-rewired启动react项目报错
使用react-app-rewired启动react项目报错报错内容如下：关键报错内容：The “injectBabelPlugin” helper has been deprecated as of v2.0翻译过来就是：自2.0版起，“injectbabelplugin”助手已被弃用react-app-rewired的新版本删除了injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中解决方法：把react-app-rewire.原创 2021-09-16 10:04:30 · 316 阅读 · 0 评论 -
Delete package-lock.json (not package.json!) and/or yarn.lock in your React的小技巧
相信大家和我的报错一样都是这个当你按照步骤来创建react，发现到了最后一步 npm start运行不了。 回去看提示答案在报错的上面会有提示的只要在根目录下创建一个以.env的文件然后在里面写入SKIP_PREFLIGHT_CHECK=true然后npm start 重启一下这样就ok了，大家去试一试吧...原创 2021-09-16 10:02:06 · 467 阅读 · 0 评论 -
react的左右联动
效果图这是css的代码body { margin: 0; } .linkage { width: 100vw; height: 100vh; display: flex; .linkage-button { width: 20vw; height: 100vh; background: rgb(10, 253, 233); text-align: c...原创 2021-09-08 20:34:11 · 498 阅读 · 0 评论 -
react的预加载，上拉加载，下拉刷新，延迟加载
复制就可以用这是css的代码.zhuye { position: relative; } .loading { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; img { position: absolute; width: 10原创 2021-09-07 17:30:54 · 479 阅读 · 0 评论 -
react配置redux
第一步：下载 react-redux 和reduxnpm i react-redux redux -D第二步：src路径下新建store文件store文件下新建index.js文件 import { createStore } from "redux";//引入公用的方法import { SET_NSME } from './action' //传值 name:姓名 age: 年龄function user(state = { name: 'blue', ag.原创 2021-09-02 20:37:52 · 255 阅读 · 0 评论 -
react配置axios二次封装
1.src文件夹下新建api文件夹2.api文件文件夹中新建index.js文件和request.js文件3.在api里面的api.js文件里面配置上import axios from "axios"; export const Service = axios.create({ timeout: 3000, //延迟时间 method: 'POST', headers: { "content-Type": "app...原创 2021-09-02 19:04:10 · 331 阅读 · 0 评论 -
react配置router路由教程
1.先下载以下相关依赖项npm install react-router-domnpm install react-router-config2.找到index.js然后引入按下图操作3.创建一个views的文件夹用来放创建的路由4.创建的路由初始化4.1第二个路由和第一个的路由是一样的5.创建一个routes文件夹里面创建一个index.js6.然后在app.js里面配置router 按照下图操作7.然后npm start 重启...原创 2021-09-02 17:49:29 · 239 阅读 · 0 评论 -
react 配置ant-Mobile
1、Ant Design Mobile中文文档2、安装 npm install react-app-rewired customize-cra --save-dev3，打开 package.json ，找见scripts 直接全部替换/* package.json */"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test":...原创 2021-09-01 19:46:25 · 1013 阅读 · 0 评论 -
react配置less
1、npm run eject 暴露webpack配置文件！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject2、npm i less less-loader-s 安装相关依赖npm i less less-loader-s 3、修改 webpack 配置第一步：在webpack.config.js文件中找到如下代码...原创 2021-09-01 18:54:55 · 114 阅读 · 1 评论 -
react实现选项卡
代码如下：复制就可以用了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-08-30 20:33:21 · 245 阅读 · 0 评论