react
虚年
展开
-
React 样式: CSS模块化
CSS模块化,通过require引入样式这种方式,优点是:解决了命名冲突和全局污染的问题如何使用:1. 安装css-loader依赖npm install style-loader css-loader -D2. 配置webpack的css-loader{ test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoade原创 2017-09-03 22:30:57 · 6943 阅读 · 0 评论 -
React Route打开新窗口出现Not Found
React Router 是建立在 history 之上的。有三种记录路由历史记录的方式:hashHistory、browserHistory和createMemoryHistory。hashHistory 使用 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。browserHistory 它使用浏览器中的 History API 用于处理 U原创 2017-09-06 10:16:08 · 3071 阅读 · 0 评论 -
React react-responsive媒体查询
媒体查询使用不同的组件 npm install react-responsive --savevar MediaQuery = require('react-responsive');...render() { return ( <div> <MediaQuery query='(min-device-width: 1224px)'> <PCIndex原创 2017-09-06 10:19:41 · 2775 阅读 · 0 评论 -
React 操作DOM元素的两种方式
1. 使用选择器var Btn = document.getElementById('btn')2.使用ref原创 2017-09-03 13:17:37 · 16386 阅读 · 0 评论 -
React 样式
在render 中定义,是以内联的方式加入到DOM元素中。书写时要-要写成驼峰的写法。 这种方式加入css缺点是动画、伪类等不能使用const styleComponentHeader = { header: { backgroundColor: '#aaa', paddingTop: '15px', paddingBottom: '15px' }}return原创 2017-09-03 13:50:17 · 354 阅读 · 0 评论 -
React 样式:内联样式表达式
1. 定义stateminiHeader: false2. 定义事件switchHeader() { this.setState({ miniHeader: !this.state.miniHeader })}3. 触发事件onClick={this.switchHeader.bind(this)}4. 样式切换 const styleComponentHeader = { hea原创 2017-09-03 13:52:25 · 10164 阅读 · 0 评论 -
react-router4
React-router41. 基础使用安装yarn add react-router-dom -S基本使用BrowserRouter 包裹整个应用Router路由对应渲染的组件,可嵌套Link跳转专用import { BrowserRouter, Route, Link } from 'react-router-dom'ReactDOM.render( <BrowserRouter>原创 2017-12-09 12:50:10 · 445 阅读 · 0 评论 -
Redux状态管理 4.Chrome Redux调试工具
Redux状态管理4 Chrome Redux调试工具安装chrome插件chrome扩展程序-更多扩展程序-搜索Redux DevTools配置新建store的时候判断window.devToolsExtension使用compose结合thunk和window.devToolsExtension调试窗的redux选项卡,实时看到stateimport { createStore, app原创 2017-12-09 13:17:08 · 3741 阅读 · 0 评论 -
React Jest UI测试
组件// demo.jsimport React, { PureComponent } from 'react'class Demo extends PureComponent { static defaultProps = { title: 'This is a demo', value: 0 } constructor (props) { supe...原创 2018-11-01 19:08:19 · 1641 阅读 · 0 评论