react
mikibiubiu
这个作者很懒,什么都没留下…
展开
-
表单验证联动
import {Picker, Card, WingBlank, WhiteSpace ,List,InputItem} from 'antd-mobile';import { Component } from 'react';import { connect } from 'dva';import styles from './IndexPage.css';const colors =...原创 2019-12-17 00:01:37 · 424 阅读 · 0 评论 -
<center>全局导航跳转工具类</center>
export default class NavigationUtil { /** * 跳转到指定页面 * @param params 要传递的参数 * @param page 要跳转的页面名 **/ static goPage(params, page) { const navigation = NavigationUtil...原创 2019-10-23 16:11:46 · 193 阅读 · 0 评论 -
<center>引入antd-mobile过程中报错:The "injectBabelPlugin" helper has been deprecated as of v2.0. 【</center>
报错:The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins原因是新版本的react-app-rewired...原创 2019-10-07 12:46:53 · 157 阅读 · 0 评论 -
<center>create-react-app脚手架工具使用</center>
1- 快速创建项目npm install -g create-react-app //---全局安装react脚手架create-react-app my-app //---通过react脚手架创建my-app项目cd my-app/ //---打开my-app项目npm start ...原创 2019-10-02 20:40:38 · 139 阅读 · 0 评论 -
<center>redux-saga框架使用详解</center>
什么是redux-sagaredux-saga 是一个用于管理 Redux 应用异步操作的中间件(又称异步 action)。 redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理,可以用来代替 redux-thunk 中间件。这意味着应用的逻辑会存在两个地方:Reducers 负责处理 action 的 state 更新Sagas 负责协调那些复杂或异步...原创 2019-09-28 23:14:24 · 126 阅读 · 0 评论 -
<center>使用Redux-thunk中间件实现ajax数据请求</center>
1.先安装redux-thunk依赖npm install redux-thunkyarn add redux-thunkredux-thunk的GitHub网址 : https://github.com/reduxjs/redux-thunk2.接下来我们要引入配置redux-thunk这个中间件参考上面GitHub的网址上的文档3.打开store文件夹下的index文件引入redu...原创 2019-09-27 20:02:05 · 124 阅读 · 0 评论 -
<center>使用redux完成todoList的删除功能</center>
1.没有把action单独拿出来的时候当大小写写错的时候很难找出错误而把action统一抽出来作为常量写入action-type中便于管理。2.在store文件夹下新建actionTypes.js文件export const CHANGE_INPUT_VALUE = 'change_input_value';export const ADD_TODO_ITEM = 'add_todo_it...原创 2019-09-27 15:40:12 · 122 阅读 · 0 评论 -
<center>使用antd+redux重写Todo</center>
1.在src目录下新建一个index.js文件文件内容如下:import React from 'react';import ReactDOM from 'react-dom';import TodoList from './TodoList';ReactDOM.render(<TodoList/>, document.getElementById('root'));2...转载 2019-09-27 11:59:26 · 118 阅读 · 0 评论 -
react中dangerouslySetInnerHTML使用
在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。在显示时,将内容写入__html对象中即可。具体如下:<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:<di...原创 2019-09-25 19:50:41 · 188 阅读 · 0 评论 -
<center>React实现简易TodoList</center>
class TodoList extends Component {/**render函数返回的JSX模板最外层只能由一个包裹元素 * 使用Fragment做占位符,只起包裹作用,并不会渲染成DOM元素 */ render() { return ( <Fragment> <div> ...原创 2019-09-25 19:18:47 · 124 阅读 · 0 评论 -
<center>Redux框架之combineReducers()</center>
combineReducers()随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。combineReducers 辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。合并后的 reducer...原创 2019-09-24 21:37:02 · 101 阅读 · 0 评论 -
<center>redux+react-redux</center>
本文主要记录下自己在react道路上的爬坑过程 以及对于刚学习redux的同学提供一些可供参考的例子。要知道redux和react并没有半毛钱的关系,redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢,学习react-redux之前我们要比较熟悉的了解redux的思想。首先安装react-redux:npm install re...转载 2019-09-24 21:34:29 · 102 阅读 · 0 评论 -
<center>使用react-transition-group实现动画效果进阶<renter>
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子,首先我们需要安装react-transition-group,输入:npm install react-transition-group --save ,使用yarn的同学输入 yarn add react-transition-group组件中引入CSSTransition模块:...转载 2019-09-24 21:27:32 · 151 阅读 · 0 评论 -
<center>styled-components中弃用injectGlobal的解决</center>
编译错误提示: ‘injectGlobal’ is not exported from ‘styled-components’原因: styled-components 4.x版本将原来的injectGlobal方法用createGlobalStyle替换了。用法上也有一些不同,如下import {createGlobalStyle} from 'styled-components';exp...原创 2019-09-21 20:17:26 · 295 阅读 · 0 评论 -
<center>React基础------JSX占位符:Fragement</center>
JSX占位符:Fragement在JSX中返回的内容都必须包含在一个大的标签内,所以我们不得不在最外边套一层div,如果我们不希望页面渲染这层div的话就需要使用占位符-Fragementimport React, { Component, Fragement} from 'react';class App extends Component { render() { retu...原创 2019-09-20 20:14:05 · 1406 阅读 · 0 评论 -
<center>React为什么会出现?React特点</center>
React诞生的原因React是Facebook开发的一款的JS库,那么Facebook为什么要创造React?Facebook认为MVC无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得复杂,每当需要添加一项新功能或者特性时,系统的复杂就成级数的增长,致使代码变得脆弱而不可预测,结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模的应用。当系统中有很多模型和...原创 2019-09-19 12:48:08 · 342 阅读 · 0 评论