2016-12-07 23:12:00来自分类 React
# 正常打包 ```javascript import IndexPage from './views/app.jsx' import AboutPage from './views/about.jsx' export default function({history}) { return ( <Router history={history}> <Route path="/" component={IndexPage} /> <Route path="/about" component={AboutPage} /> </Router> ) } ``` 这是一个正常打包的路由写法, 如果需要分割代码, 我们需要改造下路由, 借助`getComponent`和`require.ensure` # webpack 代码分割 ```javascript export default function({history}) { return ( <Router histor...
2016-12-07 22:12:00来自分类 React
# Vue-Router ```html // vue1 <a v-link="{ path: '/', activeClass: 'custom-active-class' }"></a> // vue2 <router-link to="home" active-class="custom-active-class">Home</router-link> ``` 但是这里有一个小问题, 如果该链接是根路由, 那么访问任何路由, 根路由都会被添加`custom-active-class`, 怎么解决呢? 只要添加`exact: true`即可, 这样就要求地址要完整匹配, 才会添加`ActiveClass` # React-Router ```javascript import {Link} from 'react-router' // ... <Link activeClassName="v-link-active" to="/"> ``` `React-Router` 一样会有`Vue-Router`的问题, 不过也有解决方法, 我们需要用到`IndexLink` ```jav...
2016-12-07 22:12:00来自分类 React
对于用习惯了Vue的双向绑定后, 对React的双向绑定, 真心觉得蛋疼... Vue的双向绑定, 只需要在data中初始化, 然后用v-model绑定即可, 简单省事... 再来看看React的: ```javascript var NoLink = React.createClass({ getInitialState: function() { return { message1: 'Hello!', message2: 'Hello!' }; }, handleChange1: function(event) { this.setState({message1: event.target.value}); }, handleChange2: function(event) { this.setState({message2: event.target.value}); }, render: function() { var message1 = this.state.message1, message2 ...