React
学习react
TO_WebNow
分享解决的方案思路
展开
-
ant Design Pro 路由图标添加错误
ant-design/icons/DislikeOutlined" does not exist in container.1. 首页确保下载了iconyarn add @ant-design/icons2. 删掉node_models3. 删掉src/.umi文件夹4.关闭项目, 下载依赖,重新启动试试原创 2021-12-01 23:15:04 · 864 阅读 · 0 评论 -
AntDesign Pro connect
前言: 这是我在学习的时候遇到了这块的内容, 有些可能理解不到位, 还请指出dva 提供了 connect 方法。如果你熟悉 redux,这个 connect 就是 react-redux 的 connect 。Connect传递Model中的数据给router比如model中定义的login.js 定义了state数据,那么在router组件中怎么获取到这个数据呢?通过connect可以传递过来,然后通过this.props就可以访问了,同样也会将dispatch(可以发送请求到model原创 2021-11-26 22:26:56 · 306 阅读 · 0 评论 -
React代理配置总结
一.直接在package.json中设置proxy属性"proxy": "http://172.16.136.249:8080"二.安装http-proxy-middlewarenpm install http-proxy-middleware --saveyarn add http-proxy-middleware --save三.在src目录下创建 setupProxy.js 文件const { createProxyMiddleware } = require('...原创 2021-10-09 16:23:22 · 108 阅读 · 0 评论 -
Laravel 部署到宝塔 一个api接口, 一个前端页面分成两个网站
前言前端单独放了一个网站里(用的一级域名 => abc.com);后端Laravel框架写的API接口也单独放了一个网站里(用的二级域名 => like.abc.com);都是放在一个服务器里面的;但是这么部署的话会有一个问题: 就是前端文件在本地的时候你可以直接代理API那里, 但是发布到线上abc.com那里后, 代理就失效了, 线上直接访问变成了abc.com/api/list, 但是接口在like.abc.com/api/list里面, 这可怎么拿到数据呢?方案..原创 2021-10-03 23:14:29 · 586 阅读 · 0 评论 -
npm 和 yarn 的对比
原创 2021-08-01 11:30:27 · 100 阅读 · 0 评论 -
react 使用element-ui
1.在项目目录下下载:cnpm i element-react --savecnpm install element-theme-default --save2.在项目中下载依赖npm install react-hot-loader@next --savecnpm install react-hot-loader@next --save原创 2021-07-22 10:47:24 · 479 阅读 · 0 评论 -
react 遇到的问题
1. 在使用react-redux时, 没有在组件内跳转, 在js文件中使用window.location.href 跳转到另一个b组件, 在b组件中返回时, 无法再次执行componentDidMount, 或者componentWillMount中的方法,2.setState 自减的问题原创 2021-07-20 11:13:45 · 103 阅读 · 0 评论 -
Git 本地分支和远程分支
一. 本地分支// 查看分支git branch// 切换分支git checkout 分支名// 创建分支并切换分支git checkout -b 分支名// 删除分支git branch -d 分支名// 合并分支, 注意合并分支时要切换到master上, 虽然在分支上合并主支git不会报错, 但是不合理git merge // 重命名分支名 -M强制重命名git branch -m|-M 之前分支名 新的分支名...原创 2021-07-16 11:35:48 · 2688 阅读 · 0 评论 -
! [rejected] master -> master (non-fast-forward)
报错信息如下! [rejected] master -> master (non-fast-forward)error: failed to push some refs to 'https://gitee.com/giteeforone/suzhoubank.git'解决办法git pull --rebase origin master:mastergit push -u origin master...原创 2021-07-15 13:41:00 · 115 阅读 · 0 评论 -
antd 自定义主题发现编译时会报错
在使用 antd 自定义主题时如果直接 yarn 按照命令按照你会发现编译时会报错,this.getOptions is not a function; Inline JavaScript is not enabled. Is it set in your options?这两个错误的原因是因为less、less-loader版本不同导致的试试卸载当前版本,下载如下版本yarn remove lessyarn remove less-loaderyarn add less@3.12.2y原创 2021-06-09 14:06:10 · 327 阅读 · 2 评论 -
React-Design Mobile tabs 初始化当前标签
React-Design Mobile tabs 初始化当前标签场景: 点击当前的tab页 进去详情页返回时 要求还是之前的tab实现的方式: 使用的是Design Mobile ui组件的 tabs,但是使用这个组件的时候呢, tab指定了当前页 但是刷新不是那个tab我的解决办法是 在render() {} 里面获取 localstorage.getItem(‘index’) 存的当前tab的索引...原创 2021-05-05 19:55:28 · 143 阅读 · 0 评论 -
The “injectBabelPlugin“ helper has been deprecated as of v2.0
The “injectBabelPlugin” helper has been deprecated as of v2.0npm install customize-cra --save-devnpm i lessnpm i -D less-loader2. 然后修改config-overrides.jsconst { override, fixBabelImports, // addLessLoader,} = require("customize-cra"原创 2021-04-05 17:28:12 · 186 阅读 · 0 评论 -
tp5 生成二维码
tp5 生成二维码第一步要安装composer require aferrandini/phpqrcode如果没有安装composer的话, 去安装PHPstudy这个软件, 这里面会有下载composer;把这两个放在php.exe一起原创 2021-03-27 21:04:32 · 99 阅读 · 0 评论 -
react-生命周期 componentWillReceiveProps
react 生命周期 componentWillReceiveProps这个钩子函数我的用处是 点击按钮返回值 然后再这里获取1.父组件重新render直接使用,每当父组件重新render导致的重传props,子组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化。2.在componentWillReceiveProps方法中,将props转换成自己的state是因为componentWillReceiveProps中判断props是否变化了翻译 2021-03-21 20:39:54 · 1426 阅读 · 0 评论 -
React-多个onChange事件
react多个onChange事件, 常用于input<input onChage={(e) => this.chage('name', e)} />原创 2021-03-19 23:41:39 · 881 阅读 · 0 评论 -
React - antd-mobile
antd-mobile一// 下载组件库1. cnpm install antd-mobile --save// 下载依赖2. cnpm install --save-dev babel-plugin-import react-app-rewired二// 在项目根目录下定义加载配置的js模块: config-overrides.jsconst { injectBabelPlugin } = require('react-app-rewired');module.exports =翻译 2021-03-13 00:19:12 · 253 阅读 · 0 评论 -
React报错Cannot read property ‘replace‘ of undefined
React- Cannot read property ‘replace’ of undefined解析: 首先检查你的组件是路由组件还是一般组件; 只有路由组件身上才有this.props.history这些API一般组件和路由组件的区别,怎样区别呢当你的一般组件也想使用路由组件身上的api的时候呢 就需要一个方法了 withRouter// 一般组件:import Demo from './a'<Demo/>这样直接用就是一般组件// 路由组件import {Rouu原创 2021-03-09 14:01:39 · 1335 阅读 · 1 评论 -
react-redux store
react-redux store1. 在多个容器组件使用redux时, 多个组件都需要共享redux里的数据时,就需要将多个容器组件合并起来, 用于合并多个组件的插件 combineReducersimport { createStore,combineReducers } from 'redux'const allReducers = combineReducers({ '自定义键名': <A/>, '自定义键名': <B/>})export default cr翻译 2021-03-07 22:01:50 · 327 阅读 · 0 评论 -
react-redux connect连接器
react-redux connect连接器ps: 用于记录学习, 持续更新在使用react-redux的时候会用到connect, 这个会帮我们自动创建容器组件,用法如下:1. connect()(),第一个(), 传入两个函数import { connect } from 'react-redux'// state 就是 redux存储的状态export default connext( state => ({ '自定义的字段': state }), { 方法名: action翻译 2021-03-07 21:14:12 · 191 阅读 · 0 评论 -
React-Provider
React-Provider该组件可以自动判断哪个节点需要store 哪个不需要store<Provider store={store}> <App/></Provider>翻译 2021-03-07 18:57:02 · 277 阅读 · 0 评论 -
React-异步action
React-异步action所谓异步简单来说就是一个返回的是一个函数那同步简单来说就是一个Object的对象再使用异步action的时候可能会有这个错误, 意思是你需要一个中间器去处理异步action, 所以下载一个插件, 再下面1. 需要下载的插件, 用于异步actioncnpm install redux-thunk -S// reducer.jsconst ASYNCFUN = () => { return (dispatch) => { setTimeout(()原创 2021-03-06 18:07:27 · 438 阅读 · 0 评论 -
React-一般组件使用路由组件的api
React-一般组件使用路由组件的apiwithRouter在组件中可以这样使用class Header extends Componet {}export default withRouter(Header)原创 2021-03-04 16:01:35 · 223 阅读 · 1 评论 -
React-路由传参数
React-路由传参数1. 方式1页面1<Link to="/nav1/id/title" />// 声明接受params参数<Route path="/nav1/:id/:title">详情页// 他们都是以组件的形式传参, 可以用props接受参数let {id, title} = this.props.match.params2. 方式2...翻译 2021-03-04 14:45:52 · 327 阅读 · 1 评论 -
React-封装NavLink
React-封装NavLink页面1import MyNavLink from 'mynavlink'// 方式1<MyNavLink to="/nav1">菜单1</MyNavLink>// 方式2 推荐<MyNavLink to="/nav1" children="菜单1" />页面MyNavLinkimport {NavLink} from 'react-router-dom'<NavLink className="class1" act原创 2021-03-04 13:29:37 · 124 阅读 · 2 评论 -
React-安装路由
React-安装路由1. 安装路由npm install react-router-dom2. 使用路由import { Router, Link, BrowseeRouter } from 'react-router-dom'3. 路由内置组件<Link /><NavLink /><BrowserRouter /><Route><Switch /><HashRouter />...原创 2021-03-04 09:47:28 · 494 阅读 · 1 评论 -
React-查看脚手架版本
React-查看脚手架版本安装脚手架命令全局安装npm install create-react-app -g查看版本create-react-app -V 或者 create-react-app --version原创 2021-03-04 09:34:45 · 2466 阅读 · 1 评论 -
React-消息订阅和发布机制
React消息订阅和发布机制工具库: PubSubJS下载: npm install pubsub-js --save使用:import PubSub from ‘pubsub-js’ // 引入PubSub.subscribe(‘delete’, function (data) {}) //订阅PubSub.publish(‘detele’, function(data) {}) //发布消息...原创 2021-03-01 16:41:54 · 211 阅读 · 0 评论 -
React-配置代理
React配置代理ps: 用于记录学习,持续更新在src下 新建一个setupProxy.js 文件const proxy = require('http-proxy-middleware')module.exports = function() { app.use( proxy('api', { target: 'http://localhost:5000', changeOrigin: true, pathRewrite: {'^api': ''}原创 2021-03-01 15:19:07 · 103 阅读 · 0 评论 -
React-创建脚手架
React创建脚手架ps: 用于记录学习,持续更新全局安装: npm install create-react-app -g创建包: create-react-app hello-app进入项目文件夹: cd hello-app启动项目: npm start翻译 2021-02-28 21:58:30 · 81 阅读 · 0 评论 -
React-生命周期
React生命周期ps: 用于记录学习,持续更新卸载组件的回调 ReactDOM.unmountComponentAtNode(document.getElementById('test1'))组件将要挂载的钩子 componentWillMount () { }组件挂载完毕的钩子 componentDidMount() { }组件将要卸载的钩子 componentWillUnmount() { }控制组件更新的"阀门" shouldC翻译 2021-02-28 21:17:07 · 139 阅读 · 0 评论 -
React-函数柯里化
React函数柯里化ps: 用于记录学习,持续更新先来看段代码class People extends React.Component { changeData = () => { // 下面这个renturn函数 是解决函数返回值是undefined的问题 return () => { } } render() { return ( <form> <input onChange={this.changeData}" />翻译 2021-02-28 16:09:43 · 417 阅读 · 0 评论 -
React-受控组件和非受控组件
React受控组件和非受控组件ps: 用于记录学习,持续更新1. 受控组件受控组件就像vue中的双向绑定的v-model 一样; 只不过react 的受控组件可以这样理解,就是 输入类数据(输入框, 单选, 多选, 下拉框之类的), 可以维护到setState中, 可以实时获取到数据比如下面:class People extends React.Component { state = { userName: '' } userName = (event) => { this.s翻译 2021-02-28 15:52:46 · 135 阅读 · 0 评论 -
React-类中构造器和props的关系
ps: 用于记录学习,持续更新React类中构造器和props的关系首先在类中, constructor构造器是可以不写的, 也不会对这个类产生别的影响如果传了props, 并且super中也接收了props, 在这里打印 this.props, 会打印出props的属性值如果构造器中没有传props, super中也没有接收props, 那打印的this.props 会是undefined如果一个传了 一个没接, 那也是undefined总结: 构造器是否接收props, 是否传递给sup翻译 2021-02-26 15:02:52 · 196 阅读 · 0 评论 -
React-props的限制, 及static
ps: 用于记录学习,持续更新React中props的简写方式class People extends React.Component { constructor (props) { super(props) } static propTypes = { name: PropTypes.string.isRequire // name字段 必填, 类型是字符串 age: PropTypes.number// age字段为 , 类型是数字 run: PropTypes.func /翻译 2021-02-26 14:37:40 · 303 阅读 · 0 评论 -
React-state简写方式
ps: 用于记录学习,持续更新React中state简写方式在使用state时 要继承 React.Componentclass People extends React.Component { constructor (props) { super(props) } // 类中可以直接写赋值语句 a = 1 render() { return () } demo = () => { // 这里的this是当前组件的实例对象 }}ReactDOM.render(&翻译 2021-02-26 14:16:27 · 287 阅读 · 0 评论 -
React-类式组件中的this
ps: 用于记录学习,持续更新React类式组件中的this类式组件类中所定义的方法,都放在了类的原型对象上, 供实例去使用在类式组件中 可以不写constructor; 如果有constructor(){} 加 extends, 那么就必须有 super();必须要有render () { return () } , render 中必须要有returnconstructor 中的this, 就是当前的People组件的实例对象; render(){} 中的this也是当前的People组件翻译 2021-02-26 11:05:21 · 532 阅读 · 0 评论 -
React-函数式组件
ps: 用于记录学习,持续更新函数式组件<script type="text/babel">function Demo () { // 此处的this,是undefined; 因为进过babel转换后使用严格模式, console.log(this) return <h2> 这是函数式组件 </h2>}ReactDOM.render(<Demo/>,页面ID)执行ReactDOM.render() 之后发生了什么;React 解析组件翻译 2021-02-25 13:16:36 · 171 阅读 · 0 评论 -
01-react-jsx语法注意点
ps: 用于记录学习jsx语法注意点原创 2021-02-20 15:55:18 · 76 阅读 · 0 评论