![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
幸福了,然后呢
老老实实,努力挣钱~~
展开
-
umi多语言使用
umi多语言使用原创 2022-06-15 10:55:06 · 3193 阅读 · 1 评论 -
项目中遇到的 ref 几种情况下的使用记录
ref 几种情况下的使用(1) <Form>组件中:ref={ref => (FormRef = ref)}import React, { useRef } from 'react';import { Input, Form, Row, Col } from 'antd';const { TextArea } = Input;const Delete = props => { let FormRef = useRef(); const saveData原创 2022-03-29 16:05:02 · 1101 阅读 · 0 评论 -
react 报错:There are multiple modules with names that only differ in casing.
react 报错:There are multiple modules with names that only differ in casing.这是因为引入文件的时候路径中大小写不匹配问题:我们就改一下文件名称大小写就可以啦~原创 2020-09-30 15:22:50 · 908 阅读 · 0 评论 -
findDOMNode is deprecated in StrictMode报错解决方法
findDOMNode is deprecated in StrictMode报错解决方法报错:findDOMNode is deprecated in StrictMode......这是因为在开始创建项目得时候,我们在/src/index.js下使用了严格模式得代码:这时,我们把这个代码删除掉就可以了。...原创 2020-08-26 20:56:42 · 4061 阅读 · 0 评论 -
react中yarn eject报错的解决办法
react中yarn eject报错的解决办法前情:react官方脚手架创建项目的时候没有webpack的一些相关配置,这时候我们可以通过yarn eject命令将webpack的相关配置属性暴露出来。报错:解决方法:提交git文件,再重新执行即可git add .git commit -m 'xxx'yarn eject命令成功运行后会发现暴露出许多新文件,例如:在这里就可以找到webpack.config.js文件进行修改了。...原创 2020-08-24 21:24:33 · 1720 阅读 · 0 评论 -
react引入报错Import in body of module reorder to top import/first
react引入报错:Import in body of module; reorder to top import/first一、问题情形想引入模块:import { CSSTransition } from 'react-transition-group';import React, { Component } from 'react';const logo = require("./images/logo.png");const icon_beta = require("./images/ic原创 2020-06-19 10:05:35 · 4504 阅读 · 1 评论 -
使用styled-components报错 Attempted import error: injectGlobal is not exported from styled-components
使用styled-componen报错Attempted import error: ‘injectGlobal’ is not exported from ‘styled-components’.一、安装styled-componennpm add styled-componen二、使用方法将css文件改为js文件style.js,并编辑代码:import { injectGlobal } from 'styled-components'injectGlobal ` body{原创 2020-06-17 15:20:56 · 1087 阅读 · 0 评论 -
记录npm install安装的四种用法-save和-save-dev
记录npm install安装的四种用法-save和-save-dev摘录自文档:https://www.jspang.com/detailed?id=46#toc272,第23节npm install xxx:安装项目到项目目录下,不会将模块依赖写入devDependencies或dependencies。npm install -g xxx:-g的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm cinfig prefix的位置npm install -save xxx:-转载 2020-05-21 13:45:45 · 7124 阅读 · 0 评论 -
React使用label标签for属性报错
React使用label标签for属性报错需求描述:点击标题文字直接激活input文本框,输入文字代码实现:render() { return ( <div> <div> {/* 想点击“点击加入姓名吧”直接可以激活文本框 1. 给input添加id名 2. label添加原创 2020-05-19 13:50:22 · 2469 阅读 · 0 评论 -
React实现列表的动态增加与删除
React实现列表的动态增加与删除增加数据需求描述:点击增加按钮给下方列表增加一条数据代码实现:import React, { Component } from 'react';class Jiejie extends Component { constructor(props) { super(props); this.state = { inputValue: '', // input中的值 list:原创 2020-05-18 15:45:36 · 3184 阅读 · 1 评论 -
react中解决this指向问题的四种方法
react中解决this指向问题的四种方法一、行间定义事件后面使用bind绑定thisrun(){ alert("第一种方法!")} <button onClick={this.run.bind(this)}>第一种</button>这一种方法使用bind来修改this的指向,需要注意的是bind括号内第一个参数是修改this的,后面可以设置其他参数进行传值...转载 2020-05-06 13:55:10 · 630 阅读 · 0 评论 -
React生命周期笔记记录
React生命周期这里是参考网上资料加以整理的关于React生命周期的笔记(文中案例是自己真实手敲验证的哦~),以防今后自己可以更方便快捷的查询信息内容,参考的文章链接地址如下,感谢大家给予我这种技术小白提供知识的参考:https://www.jianshu.com/p/514fe21b9914一、组件初始化阶段constructor()import React, { Compone...原创 2020-04-07 20:50:37 · 189 阅读 · 0 评论 -
React引入jsx文件报错Module parse failed: Unexpected token
引入jsx文件报错Module parse failed: Unexpected tokenrouterConfig.js:import React from "react";import ReactDOM from 'react-dom'import Page1 from './pages/Page1.jsx'ReactDOM.render( <Page1/>,...原创 2020-04-02 10:36:12 · 9631 阅读 · 0 评论 -
在React项目中使用echarts饼状图
在React项目中使用echarts饼状图一、安装npm install echarts --save二、引入import echarts from 'echarts/lib/echarts';import 'echarts/lib/chart/pie'; //饼状图import 'echarts/lib/component/tooltip';import 'echarts...原创 2020-03-11 14:12:05 · 3127 阅读 · 0 评论 -
react将字符串转义成html语句
react将字符串转义成html语句一、问题1-问题描述:从后台获取到带标签的字符串时,若直接显示就将标签也显示出来了2-代码:render(){ return( <div> {this.state.rules} </div> )}3-效果图:二、解决方法1-代码:dangerouslySetInnerHTML={{__h...原创 2020-02-26 16:44:55 · 928 阅读 · 0 评论 -
React 使用Picker选择器实现单项选择列表
React 使用Picker选择器实现单项选择列表一、功能描述效果描述:通过选择不同的选项,按对应的选择顺序展示数据效果图:二、实现方法<Picker data={orderData} // 数据源 cols={1} //列数 value={_self.state.sValue} //值 onOk={v => _sel...原创 2020-02-24 16:31:38 · 3714 阅读 · 1 评论 -
React使用PullToRefresh完成数据加载
React使用PullToRefresh完成数据加载一、先将从接口获取的数据渲染出来{_self.state.caritemlist.map((item, index) => { return ( <li key={item.carId}> <p className="carNo">{item.c...原创 2020-02-20 17:11:34 · 1671 阅读 · 0 评论 -
React&百度地图--初步引入
React&百度地图rc-bmap 是一个基于React封转的百度地图组件一、安装npm install --save rc-bmap 或者 yarn add rc-bmap #二、用法import React from 'react';import { Map, Base,} from 'rc-bmap';const { Point } = Bas...原创 2019-12-19 14:25:19 · 284 阅读 · 0 评论 -
React ——props
React ——props初学react-props,在网上搜索到了一篇对我帮助很大的文章,以此为借鉴,附上文章地址:https://segmentfault.com/a/1190000011184076 ,以表感谢!!!现记录一下自己的学习过程,以备后续(ps:文章中文字表述摘自上篇文章,代码为自己联系的demo)~~propsReact的核心思想就是组件化思想,页面会被切分成一些独立的...原创 2019-06-25 11:56:21 · 118 阅读 · 0 评论 -
webpack搭建react项目,箭头函数报错:Unexpected token
webpack搭建react项目,箭头函数报错:Unexpected token今天在webpack搭建的react项目中,写了一个小demo,想要使用箭头函数,但是运行报错,解决方法如下:报错解决办法我的 .babelrc 文件内容{ "presets": ["react", "es2015"], "plugins": [["import", { "libraryName": ...原创 2019-07-01 16:59:21 · 1876 阅读 · 0 评论 -
react--父子传值--兄弟传值
react父子传值,兄弟传值一、父组件向子组件传值——利用props属性传值父组件向子组件传值,在子组件中进行数据列表渲染;父组件:BCustomerListclass BCustomerList extends React.Component{ constructor(props){ super(props); this.state = { ...原创 2019-07-08 10:41:29 · 414 阅读 · 0 评论 -
React—state
React—state初学react-state,在网上搜索到了一篇对我帮助很大的文章,以此为借鉴,附上文章地址:https://segmentfault.com/a/1190000011184076 ,以表感谢!!!现记录一下自己的学习过程,以备后续(ps:文章中文字表述摘自上篇文章,代码为自己联系的demo)~~state一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是...原创 2019-06-27 14:13:34 · 87 阅读 · 0 评论 -
使用this.props.history.push( )方法报错
使用this.props.history.push( )方法报错问题描述:如下图所示:整体是一个父组件:BCustomerList;父组件里面引入了一个列表,是子组件:BCustomerListChild;现点击列表调转到一个详情的组件:BCustomerDetail;使用方法为this.props.history.push( ),结果点击列表的时候报错:Uncaught TypeError...原创 2019-07-05 14:15:23 · 3257 阅读 · 0 评论 -
组件间传值更新接口重新render新数据
通过组件间传值方法更新接口重新render新数据前提描述:现有一功能,在子组件A里左右切换选择不同的时间,将选择的时间值传给兄弟组件B,子组件B重新请求接口,获取新数据并重新渲染。文件分级:父组件:CarReport.jsx子组件A:TimeChoose.jsx子组件B:Day’Operate.jsxui图示:实现方式:1.先将子组件A里的时间值传给父组件,父组件在传给子组件B...原创 2019-07-19 11:28:01 · 524 阅读 · 0 评论 -
记录react中input失去焦点
记录react中input失去焦点小笔记记录~~~ ○( ^皿^)っHiahiahia… constructor(props){ super(props); this.state = { onBlur:false } } <div className="com"><span class...原创 2019-08-26 11:42:15 · 2803 阅读 · 0 评论 -
react动态渲染li点击添加样式--单选与多选
react动态渲染li点击添加样式效果描述:li 是根据请求接口数据动态渲染生成,点击 li 时给当前 li 添加相应的样式,效果图如下:实现方式:先是动态渲染出li,给li 增加样式className和onClick点击事件(此部分写在render中) var _self = this; //更改this指向 <ul> {this.state...原创 2019-08-28 10:23:49 · 3168 阅读 · 1 评论 -
'NETWORK_ENV' 不是内部或外部命令,也不是可运行的程序
‘NETWORK_ENV’ 不是内部或外部命令,也不是可运行的程序报错问题: ‘NETWORK_ENV’ 不是内部或外部命令,也不是可运行的程序先看package.json的配置文件:"scripts": { "dev": "NETWORK_ENV=DEVELOP cross-env NODE_ENV=dev webpack-dev-server --config webpac...原创 2019-06-20 14:21:22 · 308 阅读 · 0 评论