react
翟敏1201
这个作者很懒,什么都没留下…
展开
-
redux工作流程
原创 2018-12-12 17:36:50 · 259 阅读 · 0 评论 -
使用redux-thunk中间件实现ajax数据请求
1.安装npm install redux-thunknpm install redux-thunk2.引入redux-thiunk import {createStore, applyMiddleware,compose} from 'redux';import reducer from './reducer'import thunk from 'redux-thunk...原创 2018-12-18 18:42:33 · 231 阅读 · 0 评论 -
使用combineReducers完成数据的拆分管理
以header组件为例在header组件下建立store,通过index.js将store里的所有js导出在总的reducer中引入header组件的reducersimport { combineReducers} from 'redux'import {reducer as headerRuducer} from '../common/header/store/'const...原创 2018-12-28 15:32:28 · 186 阅读 · 0 评论 -
使用react-transition-group实现简单动画
1.下载# npmnpm install react-transition-group --save# yarnyarn add react-transition-group2.在需要使用动画的组件中引入import { CSSTransition } from 'react-transition-group';3.将CSSTransition包裹在需要显示动画的标签外...原创 2018-12-11 18:48:12 · 379 阅读 · 0 评论 -
react 简书项目(项目初期搭建)
1.创建项目create-react-app my-app2.安装styled-componentsnpm install --save styled-components3.将reset.css引入全局变量,解决不同浏览器默认样式的不同 https://meyerweb.com/eric/tools/css/reset/import {createGlobalSt...原创 2018-12-21 17:35:19 · 211 阅读 · 0 评论 -
react的生命周期
1.初始化数据对应的constructor --------------------------组件挂载-------------------------2.componentWillMount 在组件即将被挂载到页面的时刻自动执行3.render页面挂载3.componentDidMount组件被挂载到页面之后,自动被执行 ----------...原创 2018-12-10 16:48:25 · 122 阅读 · 0 评论 -
PropTypes与DefaultProps的应用
1.PropTypes数据类型校验,当父组件传递的数据与子组件规定的数据类型不一样时会报警告错误。下面的代码是子组件规定的数据类型组件名.propTypes = { test: PropTypes.string.isRequired,//isRequired必须传递 content: PropTypes.string, deleteIntem: PropTyp...原创 2018-12-10 14:16:43 · 187 阅读 · 0 评论 -
redux之使用activeCreators统一创建action
之前的写法都是将active零散的写在每个组件中,不便于维护所以,这里我们将active放在一个js中进行管理1.创建activeCreators.jsimport {CHANG_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './activeTypes'export const getInputChangActive =...原创 2018-12-14 14:01:48 · 206 阅读 · 0 评论 -
redux之Active Types拆分
将组件中active type拆分成单独的文件,这样做的目的是为了方便调试在组件和reducers中分别引入activeTypes原创 2018-12-14 11:22:10 · 195 阅读 · 0 评论 -
使用action与reducer
这里主要研究通过action(借书人说的话)传递给store(管理员),store再从reducer(记录本)查询数据,reducer将查询到的数据返回给store,最后store再返回给组件(借书用户)。最终要实现当reducers数据发生变化的时候,组件的数据也跟着变化1.当组件的input框输入内容发生改变时,自动调用handleInputChange,通过store.dispatc...原创 2018-12-14 09:58:43 · 545 阅读 · 0 评论 -
react基础 父子组件传递信息
1.父组件向子组件传递信息 (父组件通过属性向子组件传值)A 页面 (父组件) <TodoItem content={item}/>B页面 (子组件)<div>{this.props.content}</div>2.子组件修改父组件的内容 (父组件向子组件传递一个方法,子组件通过接收的方法间接的操作父组件)父组件imp...原创 2018-12-06 19:18:16 · 104 阅读 · 0 评论 -
为input增加点击区域,自动聚焦
原创 2018-12-06 18:36:15 · 1979 阅读 · 1 评论 -
react中转义问题
当输入框输入html,我们希望他转义成html,而不是以字符串的形式输出。很简单,方法如下dangerouslySetInnerHTML={{__html:item }}>这样就可以实现转义了原创 2018-12-06 18:32:20 · 2232 阅读 · 0 评论 -
redux的使用
1.安装reduxcnpm install --save reduxcnpm install --save react-redux2.在src目录下创建store,并在其index.js中引入createStore方法store中的index.js相当于管理员import {createStore} from 'redux';const store = createS...原创 2018-12-13 18:01:49 · 188 阅读 · 0 评论 -
使用Immutable管理store中的数据
Immutable作用是为了组织用户修改state的数据1.安装immutablenpm install immutable2.将js对象装换成immutable对象 3.使用redux-immutable统一数据格式 1>安装redux-immutableredux-immutable2>在总的reducer.js引入 ...原创 2019-01-03 23:33:51 · 273 阅读 · 0 评论